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.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Embed Google Maps in CMS


Reply

3 Posts   2134 Views

Avatar
joelg

22 October 2010 at 11:17pm (Last edited: 22 October 2010 11:21pm), Community Member, 129 Posts

Hi

I'm trying to embed a Google Map into the CMS to use in a literalfield. But when I add this line:

LeftAndMain::require_javascript("http://maps.google.com/maps?file=api&v=3&key=ABQIAAAAzUA4UlWBtsDY_B8mBtqg6xSNDhrLDUyb-SmFeApC4_mO5VDoTBQ9Moic3VBOT8Ck-SMOzG2duH886g&sensor=true");

in _config.php SilverStripe crashes with a blank screen. There are no errors.

What am I doing wrong?

Avatar
Carbon Crayon

24 October 2010 at 12:35pm Community Member, 598 Posts

hmm, looks ok to me (I am no expert using JS in the CMS).

Have you tried including it in <script> tags inside the Literal field? If it doesn't work there then it means it's probably conflicting with some other JS in the CMS...

Aram

---------------------------------------------------------------------------------

www.ssbits.com - Your one stop SilverStripe learning resource

Avatar
joelg

30 October 2010 at 7:42am (Last edited: 30 October 2010 7:48am), Community Member, 129 Posts

Hi Aram

Thanks for your hint. But I solved this by requiring another Google code in _config.php:

LeftAndMain::require_javascript("http://maps.google.com/maps/api/js?sensor=false");

This code didn't crash the CMS.

However there was a lot of problems with getting the map to show up. Sometimes it showed up, usually when refreshing the browser, but not when I clicked around on different pages. This is how I solved it – and also added some nice features to the Google Map, like Geocoding:

I included a javascript-file in getCMSFields in the class that a needed a Google Map:

function getCMSFields() {
Requirements::javascript('mysite/javascript/initGoogleMaps.js');
...

I also added some stuff to the database:

'GoogleMapLatitude' => 'Text',
'GoogleMapLongitude' => 'Text',
'GoogleMapZoom' => 'Text'

I added these fields:

$fields->addFieldToTab("Root.Content.Map", new LiteralField ("", "<div style='height:50px;'><label style='font-size:11px; color:#666666; margin: 5px 0px;'>Address: </label><br/><input id='address' style='width:530px;height:12px;margin-top:5px;padding:2px;font-size:12px;' type='text'/></div><div id='map' style='width:540px; height:300px;'></div>"));
      $fields->addFieldToTab("Root.Content.Map", new TextField ("GoogleMapLatitude", "Latitude"));
      $fields->addFieldToTab("Root.Content.Map", new TextField ("GoogleMapLongitude", "Longitude"));
      $fields->addFieldToTab("Root.Content.Map", new TextField ("GoogleMapZoom", "Zoom level"));
      $fields->addFieldToTab("Root.Content.Map", new LiteralField ("", "<div id='resetMap' style='color:#666666;cursor:pointer;margin-top:10px;'><h6>Clear positions</h6></div>"));

In the initGoogleMaps.js I did the following which hopefully should explain itself:

jQuery(document).ready(function() {
   
   Behaviour.register({
         "#Form_EditForm" : {
            initialize : function() {
               this.observeMethod("PageLoaded", this.adminPageHandler);
               this.adminPageHandler();
            },
            adminPageHandler : function() {
               initialize();
            }
         }
      });
      
   function initialize()
   {
      jQuery("#resetMap").click(function(){
         jQuery("#Form_EditForm_GoogleMapLatitude").val("");
         jQuery("#Form_EditForm_GoogleMapLongitude").val("");
         jQuery("#Form_EditForm_GoogleMapZoom").val("");
      });
      
      jQuery("#Form_EditForm_GoogleMapLatitude").attr("disabled", "disabled");
      jQuery("#Form_EditForm_GoogleMapLongitude").attr("disabled", "disabled");
      jQuery("#Form_EditForm_GoogleMapZoom").attr("disabled", "disabled");
      
      if (jQuery("#Form_EditForm_GoogleMapLatitude").val() != "")
      {
         var defaultLat = parseFloat(jQuery("#Form_EditForm_GoogleMapLatitude").val());
      }
      else
      {
         var defaultLat = 42.27806642856733;
      }
      
      if (jQuery("#Form_EditForm_GoogleMapLongitude").val() != "")
      {
         var defaultLng = parseFloat(jQuery("#Form_EditForm_GoogleMapLongitude").val());
      }
      else
      {
         var defaultLng = 13.798296875000009;
      }
      
      if (jQuery("#Form_EditForm_GoogleMapZoom").val() != "")
      {
         var defaultZoom = parseFloat(jQuery("#Form_EditForm_GoogleMapZoom").val());
      }
      else
      {
         var defaultZoom = 5;
      }
      
      var defaultLatlng = new google.maps.LatLng(defaultLat, defaultLng);
      var pageTitle = jQuery("#Form_EditForm_Title").val();
      
      var myOptions = {
         zoom: defaultZoom,
       center: defaultLatlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
         disableDoubleClickZoom: true
    };

      var map = new google.maps.Map(document.getElementById("map"), myOptions);
      
      var geocoder = new google.maps.Geocoder();
      
      var marker = new google.maps.Marker({
       position: defaultLatlng,
       map: map,
       title: pageTitle,
         draggable: true
      });
      
      google.maps.event.addListener(map, "dblclick", function(event) {
         jQuery("#Form_EditForm_GoogleMapLatitude").val(map.getCenter().lat());
         jQuery("#Form_EditForm_GoogleMapLongitude").val(map.getCenter().lng());
         
         zoomLevel = map.getZoom();
       jQuery("#Form_EditForm_GoogleMapZoom").val(zoomLevel);
         
         marker.setPosition(new google.maps.LatLng(map.getCenter().lat(), map.getCenter().lng()));
      });
      
      google.maps.event.addListener(map, "center_changed", function(event) {
         jQuery("#Form_EditForm_GoogleMapLatitude").val(map.getCenter().lat());
         jQuery("#Form_EditForm_GoogleMapLongitude").val(map.getCenter().lng());
         
         zoomLevel = map.getZoom();
       jQuery("#Form_EditForm_GoogleMapZoom").val(zoomLevel);
      });
      
      google.maps.event.addListener(map, 'zoom_changed', function() {
         
         jQuery("#Form_EditForm_GoogleMapLatitude").val(map.getCenter().lat());
         jQuery("#Form_EditForm_GoogleMapLongitude").val(map.getCenter().lng());
         
       zoomLevel = map.getZoom();
       jQuery("#Form_EditForm_GoogleMapZoom").val(zoomLevel);
      
      });
      
      google.maps.event.addListener(marker, 'dragend', function(event) {
         map.setCenter(event.latLng);
      });

      jQuery("#tab-Root_Content_set_Map").click(function(){
         google.maps.event.trigger(map, "resize");
      })
      
      jQuery("#address").autocomplete({
       //This bit uses the geocoder to fetch address values
       source: function(request, response) {
       geocoder.geocode( {'address': request.term }, function(results, status) {
       response(jQuery.map(results, function(item) {
       return {
       label: item.formatted_address,
       value: item.formatted_address,
       latitude: item.geometry.location.lat(),
       longitude: item.geometry.location.lng()
       }
       }));
       })
       },
       //This bit is executed upon selection of an address
       select: function(event, ui) {
       var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
       marker.setPosition(location);
       map.setCenter(location);
       }
       });
      
    }   
});

Hope this can help someone. An example of all of this in the frontend can be seen on our Italian Wineguide: [url]http://www.italienskvinguide.dk/regioner/piemonte/barbera-doc-g/[/url]

Joel