Adding Google Map using Snippet with optional page code
The map alone was created with this wiki code:
{s:googlemap
| kortnavn = my_google_map
| hoejde = 200
| bredde = 500
| adresse = Herlev, DK
| zoom = 14
| callback = setupMap
}
Where the callback holds the name of the sub on the client that does additional manipulation of the map.
The snippetcode in the page, is interpreted by help of a snippet named
googlemap with this contents:
<div id="?kortnavn?" class="image" style="height:?hoejde?px;width:?bredde?px;"></div>
<script><nowiki>
var ?kortnavn?;
var geocoder;
google.setOnLoadCallback(
function(){
?kortnavn? = new google.maps.Map2(document.getElementById('?kortnavn?'));
?kortnavn?.addControl(new GLargeMapControl3D());
geocoder = new GClientGeocoder();
geocoder.getLatLng("?adresse?", map_callback);
}
);
function map_callback(latlng) {
?kortnavn?.setCenter(latlng, ?zoom?);
if('?callback?'.length > 0 && eval("typeof ?callback? == 'function'")) {
eval('?callback?(?kortnavn?, latlng, geocoder)');
}
}
</nowiki></script>
This snippet code adds a div with the width and height given. It then injects some javascript code to create the map using Google API. When the center is found by a geocoder lookup, the map_callback is called with the coordinates setting the map center. If the snippet also holds a callback function name (that is defined), then this callback is called. The exval is there to prevent errors in case the callback is not given or is invalid somehow.
The snippet depends on some loader code, that must exist in the global HTML-Head content file:
<script type="text/javascript" src="http://www.google.dk/jsapi?key={Google API key}"></script>
<script type="text/javascript">
google.load("maps", "2");
....other google.load() items....
</script>
Finally I added the callback below, to the page, to show ho to draw lines on the map.
I created a piece of code to transform adresses and collect coordinates into an array. Since the google API does a online lookup the client have to wait for all callbacks to return the response. Therefore I made the counter to ensure that all responses is in house, before adding the polyline to the map.
<script><nowiki>
// Create globally available variables
var polyline = new Array(4);
var linecount = 0;
// The snippet call this function delivering a map and a geocoder object
function setupMap (map, gc) {
map.setMapType(G_HYBRID_MAP);
gc.getLatLng("borgerdiget 108, 2730 Herlev, DK", function(latlng) { setPolyline(map, latlng, 0); } );
gc.getLatLng("hjortespringvej 83, 2730 Herlev, DK", function(latlng) { setPolyline(map, latlng, 1); } );
gc.getLatLng("hjortespringvej 33, 2730 Herlev, DK", function(latlng) { setPolyline(map, latlng, 2); } );
gc.getLatLng("hjortespringvej 31, 2730 Herlev, DK", function(latlng) { setPolyline(map, latlng, 3); } );
}
function setPolyline(map, latlng, index, end) {
linecount++;
polyline[index] = latlng;
if(linecount == polyline.length) {
map.addOverlay(new GPolyline(polyline, "#f33f00", 5, 0.5));
}
}
</nowiki></script>
What you need to do to make this work for you
- You need to obtain a Google API key from Google and put it the code
- Add the loader code to the root HTMLHeader content file.
- You should replace google.dk with google.{your country domainpart}
- Add the snippet definition to the snippet collection, give it a name you prefer.
- Add a snippet call to your page and put in your required values
To add some spice to you map, you can try adding the callback to the snippet to make some lines on the map.
Adding Google Map with markers and tooltips¶
First create the map using the snippet. This example is using the same snippet as defined above.
When the map has finished being created, the snippet will do a callback to the addmarkers function that then adds the markers. The code for this is also shown at the right.
|
<script><nowiki>
// The snippet call this function delivering a map and a geocoder object
function addMarkers (map, geocoder, center) {
map.setMapType(G_HYBRID_MAP);
makeMarker(map, geocoder, "Krogestykket 33, 2730 Herlev, DK", 'Indoor swimming');
makeMarker(map, geocoder, "hjortespringvej 96, 2730 Herlev, DK", 'Our local flower pusher');
makeMarker(map, geocoder, "hjortespringvej 24, 2730 Herlev, DK", 'Gas station');
makeMarker(map, geocoder, "Borgerdiget 145, 2730 Herlev, DK", 'Pizza and Bakery');
makeMarker(map, geocoder, "Tvedvangen 201, 2730 Herlev, DK", 'Small grovery mall');
}
function makeMarker(map, gc, address, title) {
// Create a request to get coordinates for the adress
// add the marker when the call to google returns a response
gc.getLatLng(address, function(latlng) { addMarker(map, latlng, title); } );
}
function addMarker(map, latlng, markertitle) {
// avoid using local variables here, since it is called
// by several threads
map.addOverlay(new GMarker(latlng, {title: markertitle}));
}
</nowiki></script>
{s:kort
| kortnavn = test_markers
| hoejde = 300
| bredde = 300
| adresse = Havlykkevej 16, 2730 Herlev, DK
| zoom = 14
| callback = addMarkers
}
|