40 votes



For all your Map needs please use


It does everything this package does, plus oodles of more features; Map styles, Razor rendering and multiple map providers.


Google map datatype for Umbraco V7, 



Wish to give your content editors easy Google Maps to set real world locations. 



Either via Umbraco Package Installer or Nuget with

PM> Install-Package AngularGoogleMaps

NOTE: You may need to restart IIS before the Google Map will show for first time.



1. Install package via Nuget or Umbraco Package Installer

2. Create a new data type using the new Angular Google Maps property editor 

3. Add new data type to document type

4. Create new content based on document type



a. API Key

   (Now a requirment to use Google Maps



b. Coordinate System; Choose between WGS-84 which is the international standard or

    GCJ-02 which is requirment to comply with Chinese state law

c. Show Search Box - Decide whether to display a Search box to content editor.

    To use this feature you MUST enable Places API Web Service in Google Service for

    your API Key (See http://tinyurl.com/jjkgz2d)

d. Search box country filter - Restrict search results from one country you pick from a

    dropdown list 

e. Default location – set a default location for map

f. Map Height – Set the height of the Google map in pixels

g. Hide Label – Decide whether the Map takes up all the space of the editor    

h. Hide, show or allow the selected coordinates to be displayed and / or editable

i. Marker Icon - Select an image to use as the map marker

   Can select either from a predefined list or

   any custom image  

j. Format: Choose the format you wish to store your map coordinates

   Csv = "latitude,longitude,zoom"

   Json = Json object in format

   Csv with Search: "latitude,longitude,zoom,icon image,icon shadow image,icon width,

                              icon height, horizontal anchor, vertical anchor, format,apikey,

                              coordinate system,search status,search limit,search typed by user"

i. Reduce watches - Only enable if you know what you are doing



The package contains a single dll installed in the Umbraco /bin/ folder and a collection of css, html & js files stored within the /App_Plugins/AngularGoogleMaps/2.0.3/ folder. The new data type is of type string. If google maps is unable to load, for internet issues for example, then the map will downgrade to a coordinate editor instead, this is by design to allow off net use.


Type Convertor

Dynamic convertor works straight out of the box now, converts property string to AngularGoogleMaps.Model type which contains 15 properties


In a razor page with an AGM property named Map


  var lat = CurrentPage.Map.Latitude;

  var lng = CurrentPage.Map.Longitude;

  var zoom = CurrentPage.Map.Zoom;

// Only works if format is Json or Csv with Search

  var searchtyped = CurrentPage.Map.SearchTyped;



Strongly Typed convertor converts any AGM PropertyValue to AngularGoogleMaps.Model


In a razor page with an AGM property with alias map


  var map = Model.Content.GetPropertyValue<AngularGoogleMaps.Model>("map");

  var lat = map.Latitude;

  var lng = map.Longitude;

  var zoom = map.Zoom;

// Only works if format is Json or Csv with Search

  var searchtyped = map.SearchType;







  • Fixed error when typing coordinates




  • Added icon, definition and search typed in by content editors to AngularGoogleMaps.Model



  • Allow empty API Key to be set, for sites that still accept no API key



  • Preview mode for setting section
  • Added extra default icons
  • Can now use relative icon urls



  • Removed reliance on Angular Google Map Library - This was causing endless headache
  • Added API key (Which now is a requirment for all new Google Maps)
  • Added Coordinate System
  • Added reduce watch mode, for those using AGM in very large multiple fieldset controls



  • Stopped dependancy on Archetype
  • Can now set size and anchor point for custom marker
  • Removed long list of pre-defined markers (New pre-defined markers will appear in next version), for now can only create custom markers



  • Use InvariantCulture for decimal convertors



  • Added Google Map to data type to make it easier to pick default location
  • NuGet package (https://www.nuget.org/packages/AngularGoogleMaps)
  • IPropertyValueConverter and StronglyTyped Convertor to convert string property value to Lat, Long, Zoom easily



  • Updated to latest http://angular-google-maps.org 2.1.X library 
  • Can now select marker icon to use
  • Removed excess watches for improved performance



  • Can now be used within an Archetype.
  • Have added Google API KEY for heavy users with more than 25 000 map request per day 
    Need to amend line 2 of /App_Plugins/AngularGoogleMaps/1.0.4/controller.js if you require this functionality.


  • Have removed internal resources from dll, now uses standard js, css & html files stored in /App_Plugins/AngularGoogleMaps/1.0.3 folder



  • Have removed usage of 'draggable' attribute, to stop clash with uSkySlider



  • Extra refresh if map is not on first tab on content
  • Fixed error with release mode, eg. web.config not in debug mode



  • While the package is currently for backend use only, maybe add some frontend rendering code, for quick rendering of google maps within razor templates for those coder who are lazy/don't require any fancy features for their map. Maybe even include ability to render more than one marker for those that have embedded AGM within Archetypes and/or across different property types.

If you feel you might benefit from one or all these new features now, seed me a quick tweet and I might be tempted to speed up the coding, knowing that someone cares. (@JoniffRichards)



Package owner

Jonathan Richards

Jonathan Richards

Jonathan has 1742 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
Version 8.18.x (untested)

You must login before you can report on package compatibility.

Previously reported to work on versions: 7.5.x, 7.4.x, 7.2.x, 7.1.x

Package Information

  • Package owner: Jonathan Richards
  • Created: 05/06/2014
  • Current version 2.0.3
  • .NET version 4.5.2
  • License MIT
  • Downloads on Our: 3.6K

External resources