Google Map - Curtin Presence

Uses Google Maps to show world wide locations with a Curtin presence.

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> Curtin World Wide Presence </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: 15
    };
    
    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.campus, row.address, row.country, row.url);
        
        // 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(campus, address, country, url) {
    var html = "";
    html += "<b>" + campus + "</b></br>";
    html += address + "</br>";
    html += country + "</br>";
    html += "<a href='" + url + "' >" + url + "</a>";
    return (html);
}

// The following could come from a database as JSON text
var table = {
    city: [
        {
            campus: "Curtin University, Bentley Campus",
            address: "Kent Street, Bentley WA 6102",
            country: "Australia",
            latitude:  "-32.003850", 
            longitude: "115.894818",
            url: "http://www.curtin.edu.au"
        },
    ...