Umbraco Google Maps datatype, display with jQuery + GMaps API v3.0

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:
      Could not load store map
      </div>

2 thoughts on “Umbraco Google Maps datatype, display with jQuery + GMaps API v3.0

  1. I have also installed umbraco google maps datatype, but when I use this code or all other code, I get no maps or nothing. Can you help me? Regards

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s