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?

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

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