Google map is a brilliant resource for anyone interested wishing to find a location, or using it to get travel directions. It is also allows anyone who has a website to add a map to their site, free, gratis, without cost, complements of Google and that is really cool.
Now if you are a professional webmaster you may as well move onto another topic as "I will be telling my granny how to suck eggs" so to speak, and if you are not from Scotland, or over the age of 50 you probably need to try and figure out my favourite saying when it comes to explaining how to do things, I always think that other people probably know a lot more than I do, still I may as well amuse myself and explain a little about Google Maps and give those of you who are new at this game a little help setting up a Google Map on your own website. First you may want to have a look at a Google map that you will build with my "keep it simple" user guide to Google Maps.
So here is our example World Map that you can easily build using Google Map API code (don't worry about the API code bit, that scares me as well). I created that map in about 10 minutes flat using Google Map technology. The map is fully interactive for users to pan, zoom and switch on/off geographical information.
This is exactly the same map you will create using the tutorial below. I am also nice and give you the html code for all the little features I happen to like on the map. So the steps you need to follow to create your own Google Map for your area is summarised below:
1. Sign up for a Google API Code - this is simply the unique code linked to your domain and website. You do of course need to have a website to start with.
To sign up you will need to have a Google Account and you may have one already. If you do not have a Google account then remember it is free to set-up an account and is easy to do. Once you have signed in you can request a Google Map API code for your website - remember this is based on your domain and can't be used on more than one website. You can request further map API keys if you have more than one website, however let us just get past creating our first online, fully interactive map first without worrying about putting the maps on all your websites.
Below is a screen capture of the agreement and where you would enter your domain, use the full address of your website (the http://www) not just the www part.
You will find the location of Google Map API page here where you create your domain based map API code using the sign up page.
If you do not yet have a Google Account then go create a Google Account now and get your free account with Google, or get your password sent to you if you have forgotten it (as I often do). After you have entered your domain name where you plan to have your online Google Map click on Generate API Key and Google will provide you with a MAP API key. This is unique to your Google Account and website and allows Google to identify your site, your MAP API can't be used by another domain for example.
You can now start creating your new map page for your website.
What I tend to do is copy the example map html code to notepad and then save it for future reference. To copy and paste just select the html code and use the copy command to copy/paste into notepad. I tend to use the keyboard shortcut ctrl + c to copy then ctrl + v to paste.
By now you should have your example map saved onto your computer as a notepad text file, you can of course use this code to create a map page however it does look a bit bland as you can see from this screen capture of the default example map.
To see this map in action try out our out of the tin map from the Google API sign up page. Ok it is nice of Google to provide the building blocks for a fantastic (brilliant really and free) Google Map for your website however would it not be nicer if they gave you a full blown Google Map with some of the bells and whistles. Well I took pitty on you and have completed some of the simplier bits, as basically I have no idea how to do some of the more complicated bits with these maps.
When I figure it out I will add it to this page. What you do get is shown below in a few easy steps (you have already done the hard bit, reading this far down the page!).
This is the same map as introduced to you earlier - our world map just happens to be looking at the United Kingdom and Europe. Ok so this map is a bit larger, it has a zoom / pan bar (top left) it has a zoom location finder box (bottom left) and a map scale. It also has a x y (latitude and Longitude) map co-ordinates showing for the centre position of the map.
Still fairly basic yet a lot better than the out of the tin Google Map you get when you sign up. So what do we need for this, first open up a new web page in your favourite html editor (or just use Windows Notepad it works just fine for a simple html web page) and copy and paste the html code provided in the file below into the code part of your web editor. The text file is in a zip format file so that is does not get accidently shown in a search engine (the code that is) as it would confuse most people looking at it in a browser.
So download the zip file now from http://www.visitandlearn.com/maps/googlemapcode.zip
Now if you want to use notepad to create a proper web page simply use the save as ... to change the file format from txt to html - you can also just save the file and then re-name the file extension.
If you are not sure what I mean then there is a useful wiki article on the subject of file extensions. You may need to change the settings of your computer file manager to show file extensions. Three things are required before this map will work on your website, the easy bit is to copy and paste your Google Map API code you got earlier into the area that says key=XXXXXXXX remember to leave the " bit that finishes off the code.
Now either rename the html page from index.html to something more meaningful for your map - if you live in the Rocky Mountains you could call it something like rocky-mountain-map.html - please do not put spaces in a web page name, it is not cool for your users to see something like rocky%20mountain%20map.html and I also feel that search engines are not keen on spaces either, but what do I know?, search engines are a mystery to me and millions of other webmasters / web developers and SEO people.
Next upload your file to your website using your ftp software. Check that it works.
The most common problem will be if you forgot to put in your Google API code or you have uploaded it to the wrong website if you are lucky to have more than one site.
Commercial break
-----------------------------------------------------------------------------
At the bottom of your new map you will find links to visit and learn.com and to this article as well as to the Google API sign up page. Now you do not need to leave these links on your brand new Google Map however if you do it will bring millions of visitors to my site and I will make millions of dollars from Google Adsense advertising and smile a lot - I may even be nice to people occassionally.
So it is your choice, you can make a miserable Scot happy or you can leave me crying in my soup. Now if that is not the saddest thing you have ever heard I could tell you my life story .... ok sorry I don't need people jumping off bridges because of me! It is your choice to leave the links or remove them.
Also at the bottom of the page is a commented out section for you to add a link to validator.org which is a very useful tool to check that your html code is compliant with the document type you are using. If you decide to uncomment this just remove the < ! -- and - - > bit above and below the html code for the validator link - also please remember to add your actual web page to the "referrer" bit of the link as so many webmaster forget to do this.
------------------------------------------------------------------------------
So what is next, yes there is a little more to do before you have your map finished for your website. What I mean is that you will probably want to show the location of your area around your business or holiday accommodation area. So first you need to locate your area on the map and that is why I have added the x y co-ordinates on the map (see I am being very nice).
So let us try out something just for fun to see how this works in real life, find New York City on the map and copy paste the co-ordinates into notepad.
To do this use the zoom and pan features of the map. I have (40.78885994449482, -73.81439208984375) as the co-ordinate for the latitude and longitude (hope I have these the correct way round and have spelt them correctly).
Now open you map page and copy these into the location shown as map.setCenter(new GLatLng(37.4419, -122.1419), 3); so it should look like map.setCenter(new GLatLng(40.78885994449482, -73.81439208984375), 3);
Now upload this changed map to your website and view it.
So where is New York? well believe me you are looking at it, just that the map is zoomed out so far you can't see it.
Notice the number 3 in the co-ordinate code above, well this it the level of zoom for the map, the smaller the number the further out you are. Let us change this to a higher zoom number, say an 8. Try it again and see if you can "see" New York City. Pretty amazing, so play around with the zoom value and find one that suits you.
Also find your own location and record the co-ordinate values and enter them into your map. Upload it and test it to make sure the map is correct and shows your location. I am just about done! One last thing to mention is to give the map a proper title, I personally like using names for pages that tell my visitors exactly what they are going to find. So if your map is of the Rocky Mountains give the page a title that reflects that, it tells search engines what the web page is about and it also tells your human visitors what to expect.
The page title is the name that comes up in the web browser title and is coded under the "< t i t l e > test map < / t i t l e >" html section of your web page. You should also give your page a title and this is coded under the "h1" section of your html page.
Thats it for now, I may add some more information on how to make a few dollars from your map page, however as this page was written to help a friend of mine who hates "advertising" tt can wait for another day. What I am saying is come back again and I may help you make a buck or two, possibly enough to pay your web hosting costs.
External links for documentation on Google Maps Google Maps API Version 2 Reference
Example Google maps demos of Google Map including how to create a wheel mouse zoom
I downloaded the Google Earth version 4 Pro version and was amazed at the product. Having played around with Google Maps and used them on my website for a while I had not realised how useful Google Earth could be, especially if you have a travel related website, or any website that requires geographical based information - the range of applications you can use it for is limited only by your imagination.