Adding notes to Shapes overlay in Google Maps - 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>