Our.Umbraco.GMaps - Google Maps for Umbraco 8, Umbraco 9, Umbraco 10 and Umbraco 11

Basic Google Maps with autocomplete property editor for Umbraco 8+ including property value converter.

Package	NuGet
Our.Umbraco.GMaps
Our.Umbraco.GMaps.Core

Change Log Summary

• 2.1.3: Better support for installation on Umbraco 11.
• 2.1.0: Breaking change - MapConfig.Zoom is now an int as it should be (was a string).
• 2.0.7: Added ability to re-center the map via Editor Actions and can now directly input a set of coordinates.

Features

• Multi-targeting Umbraco 8, 9, 10 and 11
• Search for address using autocomplete and place marker
• Enter coordinates in place marker
• Click on exact location on map to place marker
• Drag marker around
• Set default location & zoomlevel on Data Type settings
• Zoomlevel is saved on the property to use the same zoomlevel on your website
• Centerpoint is saved on the property to use the same centerpoint on your website different than the marker.
• MapType is saved on the property to use the same maptype on your website
• Use your SnazzyMaps API key to set mapstyles

Install

Use NuGet to install Our.Umbraco.GMaps:

Install-Package Our.Umbraco.GMaps

• Enable the following Google Maps API on https://console.cloud.google.com/home/dashboard
  • Maps Javascript API
  • Geocoding API
  • Place API

Configuration

You can configure the API Key along with other settings directly in AppSettings as per below:

Umbraco 8

Add the following keys to your web.config AppSettings node:

 <!--Google Maps Configuration-->
 <add key="GoogleMaps:ApiKey" value="" /> <!-- Google Maps API Key -->
 <add key="GoogleMaps:DefaultLocation" value="" /> <!-- Coordinate pair in the format lat,lng -->
 <add key="GoogleMaps:DefaultZoom" value="17" /> <!-- Default Zoom Level for the Maps Property Editor. -->

Umbraco 9+

Add the following to your appsettings.json file or equivalent settings provider (Azure KeyVault, Environment, etc.):

  "GoogleMaps": {
    "ApiKey": "",
    "DefaultLocation": "",
    "ZoomLevel": 17
  }

These settings can be overridden by configuring the relevant properties of the Data Type prevalues.

Build NuGet package

PM> nuget pack Our.Umbraco.GMaps.Core\Our.Umbraco.GMaps.Core.csproj -Build

Breaking Changes

• Coordinates in the strongly typed models are now represented using the Location object with individual Latitude and Longitude properties.
• MapConfig.Zoom is now an int as it should be (was a string)

Demo site Umbraco Backoffice Login Details

Username: [email protected]
Password: Password123

Special thanks and big #H5YR

Special thanks to:

• ronaldbarendse for all his contributions to this project
• prjseal for the Visual Studio project setup and included demo-site
• robertjf for making the Umbraco 9 version a reality, and continiously accepting and testing PR's and setting up release automation #h5yr

Google maps icons created by Freepik - Flaticon