So, you want a Google map on your site to give the visitors to your site a visual aid to the location of your business. Well you have come to the right place to get the basic tools and information on how to set up this helpful little object onto your website. Setting up a Google map on your site requires some HTML knowledge and a little bit of JavaScript knowledge as well in order to know what code goes where. If you are uncomfortable with either coding I suggest finding someone who knows what they are doing and employ them to implement it for you. Remember one of the key points to a successful business is location, location.
The first step to setting up your Google map is to visit the developer section of the Google map site (http://code.google.com/apis/maps/) and obtaining, what is called, a Google map API key. API Keys are unique keys assigned specifically to a particular website URL that you enter and cannot be used on more then one site. No matter where you put the map on your site Google only requires the root URL to assign the key (http://www.example.com is the root URL).
On the Google map developer pages right hand side is an easy step-by-step on how to get this all set up. Click on “Sign up for a Google Maps API key” as your first step. Once in scroll down, accept the terms set out by Google and type in your sites root URL in the location provided and press “Generate API Key.” If successful, the next screen you will come across is a message saying thank you for signing up for a Google API Key with a whole bunch of code below it. Looks scary huh? Well keep reading you are doing fine!
The screen will have 3 boxes. The top one has your unique Google Map API Key. I suggest copying and pasting this key into a notepad document for reference later. The next box shows the root URL that you entered. Make sure it is correct because if you insert the key on your site, but entered the wrong address you will receive an error message. If it is wrong press your browsers ‘back’ button and redo the steps above to correct it. Finally, the third box has your Google Map code. This is the code that is inserted into your sites page and already includes the API key in it. My suggestion is to copy this code into the same notepad document as your API Key so that you have it.
So now you have the basics of the map, the next step is to implement it onto the page of your choice on your site. You could just simply cut and paste the code that Google generates into your page and be done with it and I suggest you try that option, just to see what happens.
Ah, you are back and you cut and pasted but 2 things went wrong. Firstly, the map showed up and there was no marker on there to specify the exact location of your business and secondly, the maps starting location is somewhere in California? Well guess what, Google can’t specifically know where you are starting, what do you think they are mind readers? This brings us to our next step of the game….Geocoding.
Geocoding is basically inputting the desired address for the map and having a latitude and longitude generated so that the map knows where to point. Of course, like any other map ever made, Google maps find locations based on latitude and longitude locations, not really by street addresses. My personal favourite site, which is very easy to use and straight forward, for generating geocodes, is http://www.geocoder.ca, but I am sure if you type that into a search engine there are more. The bad part about the Google map developer section is that there is really no information on how to easily geocode locations so you have to go to an outside source on this. So if you have gone to my favourite site the only part of all that you are interested in is the Location text area. Simply type in the address you wish to had geocoded and press the ‘Geocode It!’ button. The next screen you will encounter is your address that you typed in on the right and a small Google map with a marker at the location you specified. Below your address are the latitude and longitude values for your location. I suggest copying and pasting these values into that notepad document, with your API Key and Google map code. Great, now you have everything you need to start implementing.
The next step is to go to your HTML page where you want the Google map to appear. At this point you should have the page you want the map on open in an editor and the notepad document with all your information opened as well. This is the part where I said earlier that you should have some HTML and JavaScript coding experience because you will have to distinguish what part of this code goes where. The JavaScript portion of the Google map code, the part that is between <script src and </script>, has to be placed above the <body> tag but below the <title> tag. This portion of the code gives the HTML page directive on how everything is displayed on the map canvas. Any manipulations to the map you make, in more advanced techniques, are all made here. The second part of the code that looks like this:
<body onload=”load()” onunload=”GUnload()”>
<div id=”map” style=”width:500px;height:300px”></div>
This part of the code is placed in the body of the HTML page, anywhere after the </head> tag appears. This tells the HTML page where the map is displayed and how big it is (you can change the height and width to meet your specifications).
So now that you have the code in the right spots you have to tell the map where you want it to be centered (its starting point), the starting zoom level and, of course, the marker that shows your location. We will start with the centre point of the map. Remember that latitude and longitude number we saved earlier? You will need that. Look at the JavaScript code for the section that says map.setCenter(new GLatLng(37.4419, -122.1419), 13); and replace the positive number with your latitude number and the negative one with the longitude. This tells Google map this is the maps centre point. The number 13 beside it is the starting zoom level. The larger the number the more zoomed in your map will be. Feel free to change that to your specification or leave it as the default number. Finally, the last step is the location marker of your specification. Google does not include marker code in your initial generated code, but fear not for I am here to help you. Insert the following code right underneath your map.setCenter line of code:
var point = new GLatLng(44.547749, -78.530015);
map.addOverlay(new GMarker(point));
Again you have to change the positive and negative values here to your specified latitude and longitude values. Once you have all of these tasks, done upload your HTML page to your web server and, presto, you should have a fully functioning basic Google map.
I truly hope that I have helped you, in some form or another, to create a basic functioning Google map for your site. Whether you needed a little extra nudge in the proper direction or this was a full blown tutorial help to get you on your feet, this is as simple as it gets. In the next Google map themed blog I write I will delve into the more advanced manipulation techniques that you can use to make your Google map more the way you want it. If you have any questions or comments post them below and I will answer them as quickly as possible.
