firestations

Use Google Maps to show Perth area Fire Stations.

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 External Resources for google map api    -->
<!-- to https://maps.googleapis.com/maps/api/js   -->

<h2> WA Firestations </h2>
<div id="google_map"></div>

CSS

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

JavaScript

/*
Try This:
1. Add a new marker in a different location
2. Change the info window text for an existing marker
*/

function loadGoogleMap(table) {
    var mapOptions = {
    center: { lat: -31.9450, lng: 115.9070},
    zoom: 10
    };
    
    map = new google.maps.Map(document.getElementById('google_map'), mapOptions);
    
    for (var i in table) {
        // Get the current row of the table
        var row = table[i];
        
        // Get infor for this row from the table
        var lat = row.latitude;
        var long= row.longitude;
        var html = formatHTML(row.service, row.address);
        
        // Create Google Map Objects for location and information content
        var theLatLong = new google.maps.LatLng(lat, long);
        var infowindow = new google.maps.InfoWindow({content: html});
        
        //Create the marker
        var marker = new google.maps.Marker({
            map: map,
            position: theLatLong,
            content: html,
            infowindow: infowindow
        });
    
        // Listen for clicks
        google.maps.event.addListener(marker, 'click', function() {
                                      infowindow.setContent(this.content);
                                      this.infowindow.open(map, this);})
    }
}

// Format HTML for the pop-up window when markers are clicked
function formatHTML(station, address) {
    var html = "";
    html += "<b>" + station + "</b></br>";
    html += address + "</br>";
    return (html);
}

jsonFirestations = [
   {
      "address": "438 Green Avenue, ARMADALE WA 6112", 
      "category": "FIRESTATIONS", 
      "comment": "", 
      "date": "2016/10/03", 
      "json": "{fax: 08 9497 4601}", 
      "latitude": "-32.1516954", 
      "longitude": "116.0124554", 
      "phone": "08 9497 9046", 
      "postcode": "6112", 
      "service": "Armadale Fire Station ", 
      "serviceID": "", 
      "source": "http://www.dfes.wa.gov.au/contactus/pages/frsmetropolitan.aspx", 
    ...