The following browsers are supported:
Here is an example of how to use the API.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>API Example</title>
<style>
.map {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="map"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>
<script src="http://rsgmapportal.cloudapp.net/js/libs/rsgjs/1.0/rsg.min.js"> </script>
<script>
var map,
region;
function directionsTest() {
// model properties:
// origin,
// destination,
// mode,
// waypoints,
// alternatives,
// avoid,
// units,
// region,
// departure_time,
// arrival_time
// var model = {
// origin: '4600 S Redwood Rd Salt Lake City UT',
// destination: '300 North Temple, Salt Lake'
// };
// model with transit
var model = {
origin: '4600 S Redwood Rd Salt Lake City UT',
destination: '300 North Temple, Salt Lake',
mode: 'transit',
departure_time: 1386694643
};
rsg.directions(model, {
success: function (data) {
try {
if (data.status === 'OK') {
console.log(data);
var points = data.routes[0].overview_polyline.points,
decodedPath = google.maps.geometry.encoding.decodePath(points);
region = new google.maps.Polyline({
path: decodedPath,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
console.log(data);
}
else if (data.results.length === 0) {
console.log('No results found.');
}
else {
console.log(data.status);
}
}
catch (ex) {
console.log(ex.message);
}
},
error: function (data) {
console.log(data.alert.msg);
}
});
}
rsg.config('project-key', 'username');
rsg.loadScript(function () {
var element = $('.map').get(0),
center = new google.maps.LatLng(40.767732473824125, -111.90398519592286);
map = new google.maps.Map(element, {
center: center,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsTest();
});
</script>
</body>
</html>The API is dependent upon jQuery, you'll notice that it gets loaded first.
To use with IE 8 you will need to downgrade jQuery.
Replace this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>With this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>rsg.config('project-key', 'username')
This is called to initialize and use the API, where you are passing it the project key (or project number, etc.) and providing it with a username.
rsg.loadScript(callback)
This is called to load the Google Maps API, along with an optional callback that can be executed after the script is loaded.
rsg.directions(model, { success: {...}, error: {...}})
This is called to make a directions request that is sent to the Google Directions REST API.