For a new application I’m writing for my new blog I was trying to create several Google Maps on one page. I haven’t found any solution for this issue on the Internet so now I post this Mootools class for the people who found this very interesting. You can add several functions to the class to make them even more useful.
This class is works with Firefox, Safari, Chrome, Opera but not yet with Internet Explorer…
The html
The indicator for the maps is the id tag in the div element. This works just as usual. Every id has to be unique.
The css
There is no css required. I use this css to align them nicely. You also can add an animated loading gif. In this case you should give the class also an height and a width.
.googlemaps { float: left; margin: 0px 10px 10px 0px; border: 1px #CCC solid; }
The usage
Inplement the folowing rule into your head. Make sure you put these lines between the javascript tags and you have a valid key for your Google Maps usage.
window.addEvent('domready', function() { var maps = new GoogleMaps({ map_prev_width: 300, map_prev_height: 200 //change this options to your own preference });});
