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:
- 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 }); };
- Included this on the page where I showed the map:
- JS:
http://maps.google.com/maps/api/js?sensor=false $(document).ready(function () { $('#map_container img').hide(); $('#map_container').googleMap(""); });
- HTML:
2 thoughts on “Umbraco Google Maps datatype, display with jQuery + GMaps API v3.0”
Leave a Reply to Kristoffer Cancel reply
- JS:
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
LikeLike
Hi Kristoffer,
The best place to ask for support for this is in the Umbraco forum:
http://our.umbraco.org/projects/backoffice-extensions/google-maps-datatype/misc
Not sure what Umbraco version you installed and tried the datatype on, but make sure you post that information on the forum.
Daniel
LikeLike