JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js"></script>
<div id="map_canvas"></div>
CSS
#map_canvas {
width: 400px;
height: 400px;
}
JavaScript
var map;
var marker;
// initialise the google maps objects, and add listeners
function gmaps_init(){
// center of the universe
var latlng = new google.maps.LatLng(40.4230, -98.7372);
var options = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create our map object
map = new google.maps.Map(document.getElementById("map_canvas"), options);
}
$(document).ready(function() {
if( $('#map_canvas').length ) {
gmaps_init();
};
});
var infowindow = new google.maps.InfoWindow({
maxWidth: 400
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(39.707187,-111.269531),
map: map,
title: "Marker 1"
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(38.410558,-90.878906),
map: map,
title: "Marker 2"
});
google.maps.event.addListener(marker1, "click", function() {
infowindow.close();
infowindow.setContent('abc');
infowindow.open(map, marker1);
});
google.maps.event.addListener(marker2, "click", function() {
infowindow.close();
infowindow.setContent('123');
infowindow.open(map, marker2);
});