Google Map - Building Locator

Demonstrates the use of polygons on a Google Map.

by Brian von Konsky

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Business Web Technology (ISYS3004) -->
<!-- School of Information Systems      -->
<!-- Curtin University                  -->

<!-- See jsfiddle External Resources for google map api reference -->
<!-- to https://maps.googleapis.com/maps/api/js                   -->

<h2> Building Locator </h2>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<select id="infrastructure" onchange="updateMap()"></select>
<p> Select a building and then click on the marker for more information </p>
<div id="google_map"></div>

CSS

#google_map {
    width: 512px;
    height: 512px;
    background-color: black;
}

JavaScript

// Map reference and infrastructure array stored in the global environment
var map;
var infrastructure = [ ];

// Inialise the map centered on the CBS at the Bentley campus of Curtin University
function initMap() {
    // Create a LatLng object centered at Curtin
    var curtin= new google.maps.LatLng(-32.003850, 115.894818);
    
    // Specify basic set of map options
    var mapOptions = {
      zoom: 18,
      center: curtin
      }
    
    // Create the new Map object
    map = new google.maps.Map(document.getElementById("google_map"), mapOptions);
    
    // Get get the infrastructure to be selected and placed on the map
    generateInfrastructure();
}

// Constructor to create a Building object
function Building (location, polygon, marker) {
    this.location= location;
    this.polygon = polygon;
    this.marker  = marker;
}

// Display polygons and markers for the selectd building and hide others
function updateMap() {
    var selectedIndex = document.getElementById("infrastructure").selectedIndex;
    var centerLocation;
    
    // Iteratre through each menu item
    for (var i=0 ; i<infrastructure.length ; i++) {
        // If this is the selected item put it on the map
        if (i==selectedIndex) {
            infrastructure[i].marker.setMap(map);
            infrastructure[i].polygon.setMap(map);
            centerLocation = infrastructure[i].location;
        }
        // If htis is not the selected item take it off the map
        else {
            infrastructure[i].marker.setMap(null);
            infrastructure[i].polygon.setMap(null);
        }
    }
    // Show the selected item in the middle of the map
    map.panTo(centerLocation);
}

// Create google.maps objects fore polygons, markers and the infowindow
function generateInfrastructure () {
    var optionHTML = "";
    var infowindow = new google.maps.InfoWindow({});
    for (var i=0 ; i<buildingData.length ; i++) {
        
        optionHTML += "<option>" + buildingData[i].name +...