You'll want to download the sample file and replace the following parameters to match your own map settings:
•
•Just duplicate the title here•defines the GPS coordinates the map will center in on when you click the "Display Points" link - just choose a central waypoint for the area your map covers.
Next, let's zero in on what one waypoint looks like, and what changes you'll need to make for each of your points:
Here's what you'll need to edit for each waypoint:
•— For ordering and differentiating your waypoints, change id="A" to correspond alphabetically to the order in which you wish to place your waypoints. The third point would be id="C" and so on. Note that you can include any number of waypoints on your map, but Google only provides 10 default marker images: A through J.
•— Replace this with the latitude and longitude data generated from your GPS. Note that for small projects like this it is simpler to track and add these points manually, but if you're handy with Perl you can auto-generate a lot of this XML from a list of coordinates. More info here.
•— As with the first bullet point, replace "markerA.png" with the approproate letter to correspond with your waypoint's order in the map: markerB.png, markerC.png, and so on — up to J, past which you'll have to make your own markers to link to.
•— Replace with your own title for this waypoint.
•101 E. Green St., Ithaca, NY— This defines the address displayed underneath the title in the popup balloon that results from clicking your waypoint. It is also the basis for getting driving directions to or from this point, so you can use the nearest real street address if you want to have this functionality in your map.
•http;//media.weblogsinc.com/common/videos/barb/googlemaps/1library.jpg — this defines the URL of the image or video file you wish to link to, or any other URL you wish to link to from this waypoint. (note: replaced : with ; to prevent url autolink in this example)
•picture — this will be the text that gets linked in the popup balloon; picture, movie, or link will be common terms here.
•http;//www.google.com/search?q=tompkins+county+public+library+ithaca — You can add more than one URL reference to each waypoint. This second URL is the one that gets linked from the "1 more" link in the popup balloon. Change it to whatever additional link or file you wish to link to.
•parked here! — This defines the "sub-head" descriptive text you see under the waypoint title in the right-hand pane of the map.
To add another waypoint to the map, just cut and paste everything starting from the opening tag until after the end of the closing tag from your first waypoint, then modify the same bits of data as detailed in the list above for this new waypoint. The entire collection of waypoints lives sandwiched in between the opening bit of code:
And the closing tiny bit of code:
Still with me? That is the bulk of the magic behind the annotation. When you've finished stringing together all your waypoints and have nestled them between the opening and closing bits, save the resulting final file as your_map.xml or similar. Then, upload that XML file to whatever web host you've chosen. After this, you should be able to load up the following URL in your Greasemonkey-enabled Firefox browser:
http://maps.google.com/?loc=http://yourhost.com/path/to/your/files/yourmap.xml
Your URL is similar to ours (http://maps.google.com/?loc=
http://media.weblogsinc.com/common/videos/barb/googlemaps/ithaca_walk.xml) but replacing the URL after the "?loc=" with your own XML file. It is the combination of Greasemonkey and the Google maps user annotation script that add this function to Firefox to feed an external XML file to Google maps — although there are other methods of achieving the same goal, this way is very simple.
Click the "Display Points" link and Google maps should zoom in to whatever you listed as your center point, as described above. Then, follow along on your own annotated map tour courtesy of Google maps.
Going further
This is just the tip of the iceberg of what can be done with hacking Google maps. Work up a script to import and convert your GPS data automagically from the output of your GPS. If you're handy with javascript, you can add all sorts of dynamic actions such as panning and following into your maps. Or, include your custom Google map on your own web page. You can get your custom maps working in other browsers besides Firefox, as well — we just chose the Greasemonkey method as being easy enough to do even if you've no experience with XML. For other ideas, try hunting around in the GoogleMapsHacking wiki.
And of course, don't forget to post a link to your hacked Google map!
No comments:
Post a Comment