Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules /

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Light weight Google Map implementation to critique


Reply


848 Views

Avatar
kcd

Community Member, 54 Posts

18 January 2011 at 2:51pm

Edited: 18/01/2011 2:59pm

I wanted to implement a single google map for a contact page and this is what I came up with. Any suggestions?

ContactPage.ss

...
<% require javascript(http://maps.google.com/maps/api/js?sensor=false) %>
<% require javascript(mysite/javascript/googlemap.js) %>

<div id="map_canvas"></div>
<script type="text/javascript"> initMap(); </script>
...

Layout.css

...
#map_canvas{
width: 100%;
height: 350px;
}
...

Googlemap.js

function initMap() {
var latlng = new google.maps.LatLng(-41.3,174.8);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Roughly Wellington"
});
}

I didn't want to download jQuery or risk conflicts by using window.onload() / body .onload()