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

835 Views

Avatar
kcd

18 January 2011 at 2:51pm (Last edited: 18 January 2011 2:59pm), Community Member, 54 Posts

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()