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

Light weight Google Map implementation to critique


Go to End
Reply


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