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   2204 Views

Avatar
joelg

Community Member, 129 Posts

22 October 2010 at 11:17pm

Edited: 22/10/2010 11:21pm

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

Community Member, 598 Posts

24 October 2010 at 12:35pm

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

Community Member, 129 Posts

30 October 2010 at 7:42am

Edited: 30/10/2010 7:48am

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