You are here: Home / Documentation / How To's / How to include a google map and marker

How to include a google map and marker

by ledwell published Oct 03, 2013 01:25 PM, last modified Aug 16, 2016 10:50 AM
Include a google map and marker on a page and use the "location" field for the GPS data

GoogleMapsGPSDavid Hietpas helped me with the code to get the latitude and longitude out of plone. He also wrote some code that takes care of the javascript ordering problem. looks something like $(document).ready(functiopn(){ blah...  Thanks David!!!

Ok. there are a few moving parts so a quick outline of what you will need to do to make this work. 

  • add a new javascript to the the javascripts registry
  • add a script to the site settings (where you add the google analytic code)
  • its possible that when you add the code to your page to show the map that plone will try and strip that out so you may need to adjust your HTML filter setting to allow that.

Requirements

  • You will need to have access to the zmi. 
 
Lets get started 

Creating the new javascript 

  • navigate to your "custom" folder "mysite/manage
    • choose "portal_skins" - "custom"
    • create a new file named "googleMap.js"
    • place the following code inside that file
$(document).ready(function(){

        $.get(document.location.href + '/getLocation', function(location) {
             lat_and_long = location.split(',');
             lat = parseFloat(lat_and_long[0]);
             lng = parseFloat(lat_and_long[1]);

             // Markers and other code in here...
            function initialize() {
                var map_canvas = document.getElementById('map_canvas');
                //var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
                var myLatlng = new google.maps.LatLng(lat,lng);
                var map_options = {
                  center: myLatlng,
                  zoom: 15,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(map_canvas, map_options);

                var marker = new google.maps.Marker({
                position: myLatlng,
                  map: map,
                  title: 'Hello World!'
                });
            };
            google.maps.event.addDomListener(window, 'load', initialize);

        });
});
  • save that file

Javascript Registry

Head over to the javascript registry 
  • go back to the root of the sites zmi "mysite/manage"
  • choose "portal_javascripts"
  • at the bottom of that page (under add new script) use the following
    • ID/URL: googleMap.js
    • choose "save"

Add style for the map

  • go back to the "custom" folder and add the following code to you "plone_custom.css" file (or you can make a new css file and register it with the css registry)
#map_canvas {
width: 500px;
height: 400px;
}

Add Google code to the site setup

  • go to "mysite/plone_control_panel"
  • choose "Site"
  • In "javascript for web statistics support" area put the following below your google analytics code (order shouldn't matter here)
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  • choose save

Add a page to house the map

  • add a new page give it a name then choose the "edit" tab
  • in the "body text" choose the "html" button and place the following code
<div id="map-canvas"></div>
    • (note) you may need to modify plone to allow <divs> in the html. if so head back to plone_control_panel and choose the HTML Filtering option and adjust your filters to allow that.
  • add your GPS coordinates to the "location" field in the following format (lat,log) so here is a set to get you started
44.026065826416016,-88.54718017578125
  • save and you should be good

GPS coordinatesUpdates ( Multiplemarkers )

Davide modified the code so that you can add multiple markers. Add your GPS in the location field in the following format
44.51295722,-88.0824039444.0365572,-88.512934244.06387102,-88.54781395
 
Update your "googlemap.js" file with the following
 
 $(document).ready(function(){

var loc = $('#archetypes-fieldname-location input');
if(loc.length > 0){
  var newLoc = $('<textarea name="location">' + loc.val() + '</textarea>');
  loc.replaceWith(newLoc);
}

        $.get(document.location.href + '/getLocation', function(location) {
             var lat_and_long_groups = [];
             if (location != '')
                 lat_and_long_groups = location.match(/[^\r\n]+/g);

             // Markers and other code in here...
             function initialize() {
            
                // Determine markers and store them in a list
                var markers = [];
                for(var i in lat_and_long_groups) {
                    var lat_and_long = lat_and_long_groups[i].split(',');
                    var lat = parseFloat(lat_and_long[0]);
                    var lng = parseFloat(lat_and_long[1]);
                    markers.push(new google.maps.LatLng(lat,lng));
                }
            
                var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
                if (markers.length > 0)
                   myLatlng = markers[0];

                var map_canvas = document.getElementById('map_canvas');
                var map_options = {
                  center: myLatlng,
                  zoom: 4,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(map_canvas, map_options);

               
                // Put markers onto the map
                for(var i in markers) {
                    var marker = new google.maps.Marker({
                      position: markers[i],
                      map: map,
                      title: 'Hello World!'
                    });
                }
            };
            google.maps.event.addDomListener(window, 'load', initialize);



        });


});
 

References 

Incase you need further information on google map stuff
 
 
Navigation