Jump to:

22992 Posts in 11842 Topics by 2828 members

General Questions

SilverStripe Forums » General Questions » Embed Google Maps in CMS

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

Page: 1
Go to End
Author Topic: 2007 Views
  • joelg
    Avatar
    Community Member
    129 Posts

    Embed Google Maps in CMS Link to this post

    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?

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Embed Google Maps in CMS Link to this post

    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

  • joelg
    Avatar
    Community Member
    129 Posts

    Re: Embed Google Maps in CMS Link to this post

    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: http://www.italienskvinguide.dk/regioner/piemonte/barbera-doc-g/

    Joel

    2007 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.