Google Map - Basic Map

Load a Google map showing Curtin

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

<div id="google_map"></div>

CSS

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

JavaScript

// Where in the world do you want to go?
// Try this:
// 1. Try different zoom factors
// 2. Set the mapTypeId to google.Maps.MapTypeID.SATELLITE
// 3. Set the latitute to -20.228642, 57.513503

var map;
function initMap() {
   
    // Create a LatLng object centered at Curtin
    var curtin = new google.maps.LatLng(51.508742,-0.120850);
    
    // Specify basic set of map options
    var mapOptions = {
       zoom: 17,
       center: curtin,
       mapTypeId: google.maps.MapTypeId.ROADMAP
      }
   
   // Create the new Map object
   map = new google.maps.Map(document.getElementById("google_map"), mapOptions);
}

// Initialise the map
initMap();