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