Palarong Pambansa


Palarong Pambansa

Directions service (complex)

html, body {
height: 100%;
margin: 0;
padding: 0;
#map {
height: 100%;
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: ‘Roboto’,’sans-serif’;
line-height: 30px;
padding-left: 10px;
#warnings-panel {
width: 100%;
text-align: center;


Albay Capitol
BU Sports complex

Ibalong Centrum
Aquinas Univeristy
Legazpi Airport


BU Sports complex
Albay Capitol
Ibalong Centrum
Aquinas Univeristy
Legazpi Airport


function initMap() {
var markerArray = [];

// Instantiate a directions service.
var directionsService = new google.maps.DirectionsService;

// Create a map and center it on Manhattan.
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 8,
center: {lat: 13.1405288, lng: 123.7308047}

// Create a renderer for directions and bind it to the map.
var directionsDisplay = new google.maps.DirectionsRenderer({map: map});

// Instantiate an info window to hold step text.
var stepDisplay = new google.maps.InfoWindow;

// Display the route between the initial start and end selections.
directionsDisplay, directionsService, markerArray, stepDisplay, map);
// Listen to change events from the start and end lists.
var onChangeHandler = function() {
directionsDisplay, directionsService, markerArray, stepDisplay, map);
document.getElementById(‘start’).addEventListener(‘change’, onChangeHandler);
document.getElementById(‘end’).addEventListener(‘change’, onChangeHandler);

function calculateAndDisplayRoute(directionsDisplay, directionsService,
markerArray, stepDisplay, map) {
// First, remove any existing markers from the map.
for (var i = 0; i < markerArray.length; i++) {

// Retrieve the start and end locations and create a DirectionsRequest using
// WALKING directions.
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
// Route the directions and pass the response to a function to create
// markers for each step.
if (status === google.maps.DirectionsStatus.OK) {
document.getElementById('warnings-panel').innerHTML =
'‘ + response.routes[0].warnings + ‘‘;
showSteps(response, markerArray, stepDisplay, map);
} else {
window.alert(‘Directions request failed due to ‘ + status);

function showSteps(directionResult, markerArray, stepDisplay, map) {
// For each step, place a marker, and add the text to the marker’s infowindow.
// Also attach the marker to an array so we can keep track of it and remove it
// when calculating new routes.
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
stepDisplay, marker, myRoute.steps[i].instructions, map);

function attachInstructionText(stepDisplay, marker, text, map) {
google.maps.event.addListener(marker, 'click', function() {
// Open an info window when the marker is clicked on, containing the text
// of the step.
stepDisplay.setContent(text);, marker);

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s