Using Google map API with Umbraco

Single marker display using Umbraco content

This first article of the series is about how to create some content in Umbraco that can be displayed using a marker on a Google map. The minimum amount of data required to display a marker on a Google map is the latitude and longitude of a location on Earth. It also makes sense to have a name for the location to provide some context to someone viewing the map. This means we need three items of data for a marker: name, latitude and longitude. Lets start by creating a document type for the content.

Create Location document type

Create a new document type called Location, allowing Umbraco to create a template for it at the same time. Add two properties, one called Latitude and another called Longitude using the Textstring (Umbraco.Textbox) type for both properties. The name of the page we create using this document type will be the name that will be used for the marker.

Edit Location template

For the purpose of this series the template code examples will use the mark-up for a full HTML page that doesn’t inherit any HTML layout or site CSS from the Umbraco instance that you’re working with. This is so we can avoid any layout or styling issues that could cause problems displaying the map. So let’s start by opening the Location template that was created when we created the document type, and add the mark-up for a HTML page:

<html>
<head>
    <title>@Umbraco.Field("pageName")</title>
    <script src="~/umbraco/lib/jquery/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-sOLv-YADP4SK8kJZVFr0j8r2osSs8-k"></script>
</head>
<body>
<!-- map content and google map JS goes here-->
</body>
</html>

Add container div

Next, add a div with an id of ‘map_canvas’ to the body of the page and set its height to 100% so the map fills the screen when it loads:

<div id="map_canvas" style="height:100%;"></div>

Add script code that loads the map

Add a script block with the JQuery document ready function so it runs when the page using this template is loaded:

<script>
   $(document).ready(function () {        
       // code goes here
   });
</script>

Now add the code to the function that creates the map, marker and sets their positions.

Create a position object using the values of the Latitude and Longitude fields of the Location content. This is used to centre the map over the location and to place a marker on the map:

var position = new google.maps.LatLng(@CurrentPage.Latitude, @CurrentPage.Longitude)

Now create the map object specifying the ’map_canvas’ div element as the element to load the map into, using position object for its center property:

var map = new google.maps.Map(document.getElementById("map_canvas"), {
   center: position,
   zoom:8
});

Finally, create the marker object using the position object for its position property, the map object for its map property, and then set its title property to the name of the location (which is the name of the current page):

var marker = new google.maps.Marker({
   position: position,
   map: map,
   title: '@CurrentPage.Name'
});

All done! The code added to the template should resemble the code below.

The complete template code

<html>
<head>
    <title>@Umbraco.Field("pageName")</title>
    <script src="~/umbraco/lib/jquery/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-sOLv-YADP4SK8kJZVFr0j8r2osSs8-k"></script>
</head>
<body>
<div id="map_canvas" style="height:100%;"></div>
<script>
   $(document).ready(function () {
       var position = new google.maps.LatLng(@CurrentPage.Latitude, @CurrentPage.Longitude)        
       var map = new google.maps.Map(document.getElementById("map_canvas"), {
           center: position,
           zoom: 8
       });        var marker = new google.maps.Marker({
           position: position,
           map: map,
           title: '@CurrentPage.Name'
       });
    });
</script> </body>
</html>

Create Location content item

In the Content section of the Umbraco back-office create a new content item using the Location document type and make sure it uses the Location template.

For this tutorial the name of the content should correspond to the location defined by the values in the latitude and longitude fields. For example if we name the content ‘London’ we can then set the latitude value to 51.507351 and the longitude value to -0.127758, which are the coordinates for London, UK.

Note: to find out the latitude and longitude of somewhere there are plenty of sites on the web like this one http://www.latlong.net/ that allow you to enter the name of a place to find out its geolocation. Once you have the correct values you can the cut and paste them into your content fields.

Once you have entered a name, latitude and longitude save and publish the content. If you then browse to the URL of the page you should get a Google map with a marker showing the location of the latitude and longitude you entered, and if you hover over the marker the name of the content should appear.

See the code in action

In the note above it mentions that you can find the latitude and longitude on the web and then copy and paste them into the corresponding fields in Umbraco. This is a far from an optimal solution, especially if tasked with creating a large number of location content items. Fortunately there's a way that the functionality to geocode a location can be built into Umbraco, which is the topic of the next article in this series.

Next article: Part 2 - Geocoding property editor for Umbraco using Google Maps API

Comments

To be able to comment you need to login using a Google or Facebook account.