JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
CSS
html, body, #map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
JavaScript
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locate = ['New York, NY', 'Newark, NJ', 'Baltimore, MD'];
showLocation(locate);
}
google.maps.event.addDomListener(window, "load", initialize);
function showLocation(locate) {
for (var i = 0; i < parseInt(locate.length); i++) {
var address = locate[i];
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, addAddressToMap);
}
}
var disp_title = '.$array1.';
var gj = 0;
function addAddressToMap(response) {
place = response.Placemark[0];
point = new google.maps.LatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
map.setCenter(point, 7);
var marker1 = createMarker(point, disp_title[gj], response.name);
map.addOverlay(marker1);
gj++;
}
function createMarker(point) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name
});
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(html + "<br />Location: " + place_name);
});
}