Using Google map API with Umbraco


This is a series that shows how to create content in Umbraco that can be displayed on map using the Google map API. Each article in the series builds on the last. It’s not meant to be an in-depth example of the Google map API or Umbraco development, but it will hopefully provide clear examples of how Google maps can be integrated with Umbraco using various features of the Umbraco API. 

To work through the series I also assume you have a clean instance of Umbraco up and running and access to the sites folder structure on the server. I also assume that anyone reading the series has a working knowledge of Umbraco development using document types, templates etc, as well as HTML, JavaScript, JQuery, Asp.Net Razor and MVC. Oh, and if that’s not enough there’s a bit of AngularJS thrown in as well! That said, most of the code examples should be relatively straight forward to understand if you have a basic understanding of web development using HTML, JavaScript and C#.

Update: As of June 22nd 2016 it has become necessary to use a Google map API key to be able to load maps in new websites. To obtain a API key go to the Google developers site and follow the instructions. In these articles I use one that I have obtained previously. If you cut and paste the code from this article you made find that the key doesn't work for you. If this is the case then you will need to get a new one and use it instead.

  1. Single marker display using Umbraco content

    Learn how to create some content in Umbraco that stores the latitude and longitude of a location, then display it as a marker on a Google map

  2. Geocoding property editor for Umbraco using Google Maps API

    Create a property editor that uses the Google geocoding to mark a location and store its coordinates

  3. Multiple marker display using Umbraco list view

    Create a repository of locations using a list view and display markers for each location in the repository on a Google map

  4. Create a web service to expose location data

    Create a web service using an Umbraco API Controller to expose location data from Umbraco

  5. Consume data from the Location web service using JQuery

    Use JQuery to consume data from the Location API Controller web service

  6. Create a location search API controller

    Create an API controller that takes the latitude and longitude of a location and returns locations within a specified distance.

  7. Create a Location search form

    Learn how to create a location search form that queries the Location web service and displays the results on a Google map