Full Page Google Map
Creating custom Google Maps which read their data from XML is easy.
Here is an example i created to show off my travel photos with Google maps.
Note: I’m not an expert at javascript or XML so I may not have done things in the easiest or most simple fashion. Please feel free to use this code or derivatives of it in a non-commercial fashion.
The new(ish) Google Maps API is wonderful! Unfortunately, for every good use of the API (like Bus Monster) there are a lot of sites with ugly icons and tiny maps (the guilty shall go unidentified). Though, that said, I don’t have all the answers- and am not a great web designer nor a writer of javascript (my js is absolutely terrible). The essence of this example is to let the script do the work so the XML contains all the information.
How does it work?
Essentially it reads in an XML file containing “marker”s which can be either type="photo" or type="route".
A marker with a type “photo” can have these attributes:
An example of a type=”photo” marker
- lat [the latitude]
- lng [the longitude]
- img [image file name]
- width [image width for display]
- height [image height for display]
- name [image name to display]
- desc [descriptive text for photo to display in popup]
- group [enables grouping of the images]
- link [weblink from popup]
- zoom [google maps zoom-factor if clicked on in the list]
so, as example here the entry for a photo of Lance Armstrong after winning the Tour De France
A marker with a type “route” can have these attributes:
- name [image name to display]
- colour [colour to draw the line- in]
points [comma delimited points separated by "|" e.g. -1.2,56.3|-1.3,58.2]
Note: Custom icons for each photo- make standard sized icons for each photo in PNG format and name them the same as there parent image and they’ll appear as the icon- i choose 30 X 20 pixel sized icons
The HTML file requires some fiddling with too.
The code below is responsible for the menu on the right of the page.
Random News