Thursday, October 16, 2008

Maps Test

This is a test to see if I can get Google Maps to work in Blogger:

Either it didn't work, or things are still loading...

What you should see is a small map with a few random pins in it.

Getting this to work was surprisingly easy.

1. Edit the body tag in the template to include event handlers: <body onload='gInit();' onunload='GUnload();'>

2. Add the script and div tags in the post itself:
<script src='http://maps.google.com/maps?file=api&v=2&key=[YourGoogleAPIKeyHere]' type='text/javascript'></script><script type="text/javascript">function gInit(){if(GBrowserIsCompatible()){var map=new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(37.4419,-122.1419),16);map.setMapType(G_HYBRID_MAP);map.addControl(new GSmallZoomControl());map.addControl(new GMapTypeControl());var bounds=map.getBounds();var southWest=bounds.getSouthWest();var northEast=bounds.getNorthEast();var lngSpan=northEast.lng()-southWest.lng();var latSpan=northEast.lat()-southWest.lat();for(var i=0;i<3;i++){var point=new GLatLng(southWest.lat()+latSpan*Math.random(),southWest.lng()+lngSpan*Math.random());map.addOverlay(new GMarker(point));}}}</script><div id="map_canvas" style="width: 400px; height: 300px; background-color:white; border:1px solid black; text-align:center;">Either it didn't work, or things are still loading...</div>

I've tried adding event handlers inside the post itself in order to negate the need to edit the template. Unfortunately, something is preventing the events from firing. Rather than trace down exactly what's failing, I'll put up with event handlers in the template.

The next step would be to find a program that builds the script block for me. Building it by hand every time is too much work! That said, I'm not above writing a program to build compressed script...

No comments: