Hacking Around with Google Maps
A starter guide for implementing google maps on your site.
Step 1: Getting a Map to show on your site!
First up you need a key, which is straight forward – just ask google for one! So long as you have a live domain, just sign in to google and click here.
Create a page and add the following to your header;
Obviously replacing ‘abc123’ with the key google provided you. This just adds the single java script that manages the map. Next up, also in the header, you need to add a function to load the map. In this function you’ll add all manner of extras, but for now this one would work;
The function is pretty simple, even if you don’t know any scripting language. Everything is contained within the if GBrowserIsCompatible() test – no point in trying to display a map if the browser can’t handle it. The next line creates a new instance of a map – called ‘map’. The last line sets the Longitude and Latitude co-ordinates of the center of the map. Google maps use longitude and latitudes as their co-ordinates system, so you might find a tool like this one useful for finding the co-ordinates you need. The last parameter in the ‘setCenter’ function call (12), refers to the zoom level of the map – the lower the number, the more you zoom out.
The final step in getting the map to show on your site is to call the load function from within your page body – this would work;
You can set the width & height of the map you want, and you’re ready to go! Pretty easy huh?
Step 2: Placing Markers
So, you have a map? But that’s probably not all you wanted. You probably want to highlight some feature on the map. Again, that’s pretty straight forward too. You just need to know the longitude and latitude of the feature you want to indicate. Then within the load function, add the following code (using your co-ordinates);
var point = new GLatLng(18.796914, 99.032306);
map.addOverlay(new GMarker(point));
I’ve tried doing this directly without using the ‘point’ variable, but for some reason it always places the marker in the top left corner of the map! You can add more points just by adding new co-ordinates.
Step 3: Adding Features.
It’s so easy to add features such as the zooming scroll bar;
map.addControl(new GLargeMapControl());
And we can add the “satellite” or “map” view with this line;
map.addControl(new GMapTypeControl());
Step 4: Adding More Markers, the Power of XML.
Next you might want to add more markers, to all sorts of places… Of course you can add them all individually as indicated in step 2, but when we have the power of XML at our finger tips, why bother? First up create an XML file with the data for each point…
This shows the longitude and latitude for each hotel around the new airport in Bangkok. BE CAREFUL to get your longitude and latitude the right way around, or you’ll be posting markers in all manner of random places!
Then we need to read these markers into the webpage to display them on the map – once again in that groovy load() function. Get rid of the addOverlay sections – that’s so old skool, and let’s do it with XML. The general idea of this next bit is to open the XML file, and read in each line, parsing the longitude and latitude elements before adding them as markers to the page – if you don’t like scripting, some copying and pasting should do the trick ;)
var request = GXmlHttp.create();
request.open("GET", "hotels.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var points = xmlDoc.documentElement.getElementsByTagName("point");
for (var i = 0; i < points.length; i++) {
var point = new GPoint(parseFloat(points[i].getAttribute("lng")), parseFloat(points[i].getAttribute("lat")));
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
}
request.send(null);
Obviously remember to choose the right XML file!
Step 5: More Interesting Markers.
So, Google has a nice marker, but surely we don’t want all our locations to have the same marker, and the marker isn’t ideal for all situations. Fortunately we can have a variety of different markers, but markers are actually quite complex images – with shadows, and certain sections of transparency. Sadly, I’m not graphically gifted enough to customize my markers, so I recommend Benjamin Keen’s site with a large variety of alphabetical markers ready made. The first step then is to add to the XML file, specifying which image should be used for each marker, such as;
With these markers, it is worthwhile to just use the existing Google shadow, but we still need to create our new icon class based on the existing Google Icon.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
Next create a function to create a new marker icon using the image we specify in the XML file;
function createMarker(point, iconname) {
var icon = new GIcon(baseIcon);
icon.image = iconname.getAttribute("image");
var marker = new GMarker(point, icon);
return marker;
}
Of course we need to get the information from the XML file, so add a line to where we got the co-ordinate information from before;
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
Finally, whereas before we created a new Gmarker with the ‘point’ information, now we need to create our marker using the createMarker function with both the icon co-ordinates and the icon image file.
var marker = createMarker(point, icons[i]);
Click here for the pages in their current form.
Step 6: Adding Action!
Great so far, but ideally we could make our map more interactive – and a good way would be to make the marker clickable. Fortunately events like the “click event” are easy to implement. We just need to add a listener for the event. The listener is added when the Marker is created (i.e. in the createMarker function). An easy listener could be;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(“Hello World”);
});
In this case the HTML is parsed and displayed in a small window on top of the map. While this is interesting, its better to be able to display marker specific information in the window – and that just requires sending a further parameter to the createMarker function.
First, add further information to your XML file, for instance;
Next collect this information from the XML document along with the other requests;
var info = xmlDoc.documentElement.getElementsByTagName("info");
Next pass this information as a parameter to the createMarker function;
var marker = createMarker(point, icons[i], info[i]);
Finally edit the createMarker function to get the appropriate attributes, and display them in the listener, for instance;
function createMarker(point, iconname, infoname) {
var icon = new GIcon(baseIcon);
icon.image = iconname.getAttribute("image");
var marker = new GMarker(point, icon);
var name = infoname.getAttribute("name");
var url = infoname.getAttribute("url");
GEvent.addListener(marker, "click", function() {
var myhtml = "" + name + "
Hotel Details";
marker.openInfoWindowHtml(myhtml);
});
And there you go! What an exciting world of Mapping this opens up. Why not check out my live site at : Thai Hotel Plan. Enjoy!
Comments
I nead help with similar problem
If I can send you mail of my problem . I realy nead help
because is to hard write here al detail
i must put different marker colour and info window . to read data from data base and also this colour change trought more function in database ..
Please You are my last chans ..
THX ,
Darko
my mail address :darkko.abramovic@login.hr
Interesting
I was just looking at Google Maps before I saw that you posted this. All this API and coding did turn me off it, and these things about slowing web pages down, and limits to requests... Doesn't seem as attractive as I thought it was.
---Ralph van den Berg
visit RalphvandenBerg.com
It's not so hard!!!
Give it a go... It isn't that difficult - much better than that .htaccess stuff you like...
Chiang Mai Plan
Thai Tan Thai
Laos Plan
I will try it
I must admit, I haven't even read your entire article yet. I'll give it a go, because some web projects that I'm working on will really benefit from it.
---Ralph van den Berg
visit RalphvandenBerg.com