Posted by on Friday, August 21st, 2009 at 3:30 pm.
In this week’s web design video blog, Nick and James talk about the benefits of integrating Google Maps onto your website. In addition, they also look at Google’s new Directions Gadget. After showing you how these features work, James demonstrates how to customise and add them to your website.
You can check out the map and the directions gadget on our ‘how to find us‘ page.
Script From The Video Blog
James: Hello and welcome to our web design video blog, we’re Nick and James from Creare. This week we’re going to show you how to integrate Google Maps onto your website and also take a look at Google’s new ‘Directions Widget’.
Nick: Firstly, in order to utilise Google Maps for your business, you need to ensure that your company is listed, and listed accurately. To do this, simply go to maps.google.com and search for your business. If your company is there, and the address is accurate, then you are ready to integrate this map onto your web-page.
DEMONSTRATION STARTS
James: If your business is not on Google Maps, or the information is inaccurate, then you will need to submit or claim your listing. Next Week’s Video Blog will explain how to do this. The best way to find your business on Google maps is to search for your company name, followed by the Town or City you are based in. Essentially you want to make sure that when you find your listing, you are the only business on the Map.
So once you’ve got your business central on the page, you need to now consider whether you want the map, satellite or terrain view. Simply click which one you want as this will effect the embedding code that we are about to access. Next click on ‘link’ in the top right corner, then copy and paste the HTML code from under ‘Paste HTML to embed in website‘.
Then simply paste this code onto your web page that you want the map to appear. You can then edit this code further to suit your design. In order to utilise the map correctly, you want this iframe to be at least the size that Google give it to you in. You can also remove the ‘Click for Bigger Map’ link if you wish. Simple as that.
Another free tool that Google has recently launched is their ‘Directions Widget’. To get one for your website, simply go to http://maps.google.com/help/maps/gadgets/directions/ and follow to on-screen instructions.
DEMONSTRATION ENDS
Nick: We had a question earlier in the week emailed to us from a guy called Amos – He wants to know why his © copyright icon in the footer of his web-site appeared as a question mark or sometimes even a square on different computers.
DEMONSTRATION STARTS
This is down to the HTML encoding of your web page. Best thing to do in this instance is to use the HTML code for a © Copyright symbol which is: ©
James: The best way to implement Special Characters, is to have access to the full list either through a web-page or if you’re using Dreamweaver, through the panel as follows.
DEMONSTRATION ENDS
James: Thank you for watching, please subscribe to our YouTube Channel, or follow us on Twitter at http://twitter.com/crearegroup.
Channel
on August 28th, 2009 Says:
Very useful, thanks. I’m sure a lot of companies would love to have a simple map of where they are, and this is a straight-forward way t do it.
on January 9th, 2010 Says:
Very good and well made tutorial. People who are trying to teach others should take example from you. I will add this to my bookmarks and keep watching for more tutorials.