Recently implemented the great Google Maps Datatype by Darren Ferguson in an Umbraco site. I first got the front-end map display working with v2 of the GMaps API and a third party jQuery addon, but I wasn’t happy with the dependency on API keys as this made it annoying to move/copy files around between production, staging, and local dev PCs.

The setup below will show the map if JS in enabled, or a placeholder image if JS is disabled. If it can’t parse the Google Maps Datatype property name, it will show the map centered on its default coordinates.

To display the map in the front-end, I did the following:

1. Set up the following in its own JS file:
   

   $.fn.googleMap = function(location,options) {
       var defaults = {
           lat: -33.302959,
           long: 151.419733,
           zoom: 15,
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           mapTypeControl: false,
           controls: ['GSmallZoomControl3D']
       };
   
       options = $.extend(defaults, options || {});
     
       if (location) {
           value = $.trim(location);
           var point = location.split(',');
           options.lat = parseFloat(point[0]);
           options.long = parseFloat(point[1]);
           options.zoom = parseFloat(point[2]);
       };
         
       var center = new google.maps.LatLng(options.lat, options.long);
   
       var map = new google.maps.Map(this.get(0), $.extend(options, { center: center }));
   
       var storeMarker = new google.maps.Marker({
           position: center,
           map: map
       });
   };

2. Included this on the page where I showed the map:
   1. JS:

      http://maps.google.com/maps/api/js?sensor=false
      
          $(document).ready(function () {
              $('#map_container img').hide();
              $('#map_container').googleMap("");
          });
      

   2. HTML:

      
         
      
          
        
      </div>