Adding polygons to Google maps

The methodology to insert polygons to Google Maps is very similar to the one with Leaflet. We provide the GoogleMapsPolygonLayer in our Javascript API for this task.

First you need to import the necessary javascript and css files into the header of your HTML document:

<head>
    <!--  Include jquery - required for XHR requests -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!--  Include google maps api -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=your_google_api_key" type="text/javascript"></script>
    <!--  Include r360.js -->
    <script src="https://releases.route360.net/r360-js/latest.js"></script>
</head>

Quickly define some css:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#map {
  height: 500px;
  width: 100%;
}

Now for the map. In our main script, we are going to put all our code in a jquery document ready block.

$(document).ready(function() {
  // all our code here
}

Set the map center, initialize the map, and set the basemap.

// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595, 13.393085);

// Other options for the map
var mapOptions = {
    zoom: 10,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Attach a map to the DOM Element, with the defined settings var map = new google.maps.Map(document.getElementById("map"), mapOptions);

Add the marker to the map, at the same location as the map center

marker = new google.maps.Marker({
    position: myLatlng,
    draggable: true,
    map: map
});

Define a layer to hold the polygons

var colorPolygonLayer = r360.googleMapsPolygonLayer(map);

// attach the click listeners, action when drag finished
google.maps.event.addListener(marker, 'dragend', function(event) {
    // polygon getter function, defined below
    showPolygons(event.latLng.lat(), event.latLng.lng());
});

Define the polygon getter, and set the travelOptions that need to be defined (for more travel options check out the other tutorials)

showPolygons(myLatlng.lat(), myLatlng.lng());

function showPolygons(lat, lng) {

    var travelOptions = r360.travelOptions();
    // please sign up and get your own key
    travelOptions.setServiceKey("__your-targomo-api-key__");
    travelOptions.setServiceUrl("https://api.targomo.com/westcentraleurope/");
    travelOptions.addSource({ lat: lat, lng: lng });
    travelOptions.setTravelTimes([600, 1200, 1800]);
    travelOptions.setTravelType("transit");
    travelOptions.setDate("20150706");
    travelOptions.setTime("39000");

    // call the service
    r360.PolygonService.getTravelTimePolygons(travelOptions,
        function(polygons) {
            colorPolygonLayer.update(polygons);
        },
        function(status, message) {
            console.log("The Targomo API is not available - double check your configuration options.");
        }
    );
}
Basic GoogleMaps map

Display Targomo polygons on google map

GET YOUR FREE API KEY to use this example
reload
open in new tab
show code