Using Google map API with Umbraco

Consume data from the Location web service using JQuery

In the previous article in this series we created an Umbraco API Controller web service that exposes all the location data stored in our Umbraco instance. Now we will look at creating an Umbraco template that is able to consume the data exposed by the web service.

Create the template

In your Umbraco site create a new template called Location web service map. As with part 1 of the 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 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 a map placeholder

Add a div element to the body of the html with an id of ‘map_canvas’ and set its height to 100% so it fills the screen, like so:

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

Add the 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>

Next, add some code that initialises the variables which we will use to create the map:

var map = new google.maps.Map(document.getElementById("map_canvas"));
var bounds = new google.maps.LatLngBounds();

Now what we need to do is make a request to the location web service which will return our location data and then add a marker to the map for each location returned by the service.

For this we’ll use the JQuery getJSON function which essentially makes a http request to the location web service requesting it to return the location data in JSON format. Its then parsed into an array of location objects. We can now loop through this array to create a marker for each location and then add it to the map.

$.getJSON("/Umbraco/Api/location/GetAllLocations", function (locationArray) {
    
    for (var i = 0; i < locationArray.length; i++) {
            
        var location = locationArray[i];
        var position = new google.maps.LatLng(location.Geolocation.Latitude, location.Geolocation.Longitude);
            
        bounds.extend(position);
            
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: location.Name
        });
            
        map.fitBounds(bounds);
        map.setCenter(bounds.getCenter());
    };
});

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

Full 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 map = new google.maps.Map(document.getElementById("map_canvas")); var bounds = new google.maps.LatLngBounds(); $.getJSON("/Umbraco/Api/location/GetAllLocations", function (locationArray) { for (var i = 0; i < locationArray.length; i++) { var location = locationArray[i]; var position = new google.maps.LatLng(location.Geolocation.Latitude, location.Geolocation.Longitude); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, title: location.Name }); map.fitBounds(bounds); map.setCenter(bounds.getCenter()); }; }); }); </script>
</body>
</html>

Try it out

To try it out we will use the Location repository document type and the Locations content item that we created in the Multiple marker display using Umbraco list view article of the series. 

Open the Location repository document type and allow the new template to be used as a template for this document type. Now change the template that the Locations content item uses to use this template. When you browse to the page for the content item you should see a map displaying all the locations returned by the web service.

See this code in action

Next article: Create a location search API controller

Comments

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