Adding geocoding to GoogleMaps
Base your polygons on the results of a geocode.
Adding geocoding to GoogleMaps
Create polygons from user-defined location
GET YOUR FREE API KEY to use this example
<!DOCTYPE html>
<html>
<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_maps_key" type="text/javascript"></script>
<!-- Include r360.js -->
<script src="https://releases.route360.net/r360-js/latest.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
#floating-panel {
position: absolute; top: 10px; right: 10px; z-index: 5;
background-color: #fff; text-align: center;
font-family: 'Roboto', 'sans-serif'; padding: 10px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
border-radius: 2px;
}
.button {
text-transform: uppercase;
color: #fff;
cursor: pointer;
background-color: #70BC7A;
margin-left: 8px;
padding: 4px 6px;
display: inline-block;
}
.button:hover {
background-color: #479852;
}
</style>
</head>
<body>
<!--geocoder-->
<div id="floating-panel">
<input id="address" type="textbox" value="">
<div id="geocode" class="button" type="button">Geocode</div>
</div>
<!-- where the map will live -->
<div id="map"></div>
<script>
$(document).ready(function () {
// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595, 13.393085);
// Other options for the map, pretty much selfexplanatory
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// set up map
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// add marker to mpa center
var marker = new google.maps.Marker({
map: map//, position: myLatlng
});
var geocoder = new google.maps.Geocoder();
$('#geocode').on('click', function () {
geocodeAddress(geocoder, map);
})
// polygon layer
var colorPolygonLayer = r360.googleMapsPolygonLayer(map);
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({ address: address, componentRestrictions: { country: 'DE' } }, function (results, status) {
console.log(results,status)
if (status === 'OK') {
var location = results[0].geometry.location;
var previousLocation = marker.getPosition()
if (!previousLocation || (location.lat() !== previousLocation.lat()) && (location.lng() !== previousLocation.lng())) {
// not the same location as last call
console.log(location, marker.getPosition())
marker.setPosition(location);
showPolygons(location.lat(), location.lng());
}
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function showPolygons(lat, lng) {
var travelOptions = r360.travelOptions();
// please contact us and request your own key
travelOptions.setServiceKey('__APIPLACEHOLDER__');
// set the service url for your area
travelOptions.setServiceUrl('https://api.targomo.com/westcentraleurope/');
travelOptions.addSource({ lat: lat, lng: lng });
travelOptions.setTravelTimes([600, 1200, 1800]);
travelOptions.setTravelType('bike');
// call the service
r360.PolygonService.getTravelTimePolygons(travelOptions,
function (polygons) {
colorPolygonLayer.update(polygons);
colorPolygonLayer.fitMap();
},
function (status, message) {
console.log("The targomo API is not available - double check your configuration options.");
}
);
}
// add listeners to redraw polygon on center and bounds changes
google.maps.event.addListener(map, 'center_changed', function () {
google.maps.event.addListenerOnce(map, 'idle', function () {
colorPolygonLayer.draw();
});
});
google.maps.event.addListener(map, 'bounds_changed', function () {
google.maps.event.addListenerOnce(map, 'idle', function () {
colorPolygonLayer.draw();
});
});
});
</script>
</body>
</html>