Google Map - Circle

Load a Google map with a circle showing the location of building 402

by Peter Drinnan

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: 350px;
    height: 350px;
   }

JavaScript

// Where in the world do you want to go?
// Try this:
// 1. Render the circle in different colours
// 2. Render the circle with different opacities
// 3. Render the circle with different radii.

var map;
function initMap() {
   
    // Create a LatLng object centered at Curtin
    var curtin = new google.maps.LatLng(-32.003850, 115.894818);
    var html = '<p>Building 402 - School of Information Systems</p>';
		var theInfowindow = new google.maps.InfoWindow({content: html});

		//create marker
    var marker = new google.maps.Marker({
             map: map,
             position: curtin,
             content: html,
             infowindow: theInfowindow
 });
    
    // Listen for clicks on the marker
		google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(this.content);
    this.infowindow.open(map, this);})


    
    // 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);
    
   // Draw a circle around building 402
   var coverage = new google.maps.Circle({
        map: map,
        center: curtin, // LatLng object
        radius: 50,     // in meters
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2
    });
}

// Initialise the map
initMap();