Adding notes to Shapes overlay in Google Maps

Question

Can we add some notes, a string, while making overlay shapes with google maps API? Like If I draw a circle around my home to indicate High alert area within circle with a note on it, so a person seeing the circle will know quickly, or can I just use color scheme to do this? Please, if you guys have some solution?

Answer 1

Yes you can do it.

Such a thing could be achieved with InfoWindow class, see also InfoWindowOptions object about details what options you can modify and also check the google documentation sample.

The most important option of the InfoWindowOptions object is content

Type: string|Node

Content to display in the InfoWindow. This can be an HTML element, a plain-text string, or a string containing HTML. The InfoWindow will be sized according to the content. To set an explicit size for the content, set content to be a HTML element with that size.

So let's have a look on how InfoWindow is displayed:

• Initialize map (new google.maps.Map)
• Initialize InfoWindow
• Open the InfoWindow with the open() method

If you want to draw a circle you can use Circle class , see also CircleOptions object to see what options you can adjust. It is easy to draw circles on the map - you just need to instantiate a circle(new google.maps.Circle) and pass the map in the options object.

Check the following demo code and let me know if something is not clear.

function init() {

  var center = new google.maps.LatLng(33.53625, -111.92674);
  var contentString = '<div id="content">' +
    '<div id="bodyContent">' +
    '<p>Beware this is my home :)</p>' +
    '</div>' +
    '</div>';

  /*-------------------
    MAP
    -------------------*/
  var map = new google.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 13,
    scrollwheel: false
  });

  /*-------------------
    CIRCLE
    -------------------*/
  var circle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.4,
    map: map,
    center: center,
    radius: 200
  });

  /*-------------------
    INFO WINDOW
    -------------------*/
  var infoWindowIsOpen = true;
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    position: center
  });

  google.maps.event.addListener(infowindow, 'closeclick', function() {
    infoWindowIsOpen = false;
    togglePopupButton.innerHTML = "Show Popup"
  });

  infowindow.open(map);

  /*-------------------
    TOGGLE INFO WINDOW BUTTON
    -------------------*/
  var togglePopupButton = document.getElementById('togglePopup');
  togglePopupButton.addEventListener('click', function() {
    infoWindowIsOpen = !infoWindowIsOpen;
    if (infoWindowIsOpen) {
      infowindow.open(map);
      togglePopupButton.innerHTML = 'Hide Popup';
    } else {
      infowindow.close();
      togglePopupButton.innerHTML = 'Show Popup';
    }
  });

}

.as-console-wrapper{
  display:none !important;
}

<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&callback=init"></script>

<div id="map" style="width:400px;height:150px;float:left"></div>
<button id="togglePopup" style="float:left">Hide Popup</button>