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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

All other Modules /

Discuss all other Modules here.

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

Light weight Google Map implementation to critique


Go to End


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