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.
, 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