JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
<button type="button" onClick="callInfoPoly(1)">tes</button>
<button type="button" onClick="initialize()">Re-initialize</button>
<div id="map_pan"></div>
CSS
html, body, #map_pan {
margin:0;
padding:0;
height:100%;
}
JavaScript
var map;
var polygon = [];
var infoWindow;
function initialize() {
var mapOpt = {
center: new google.maps.LatLng(-8.655410340931558, 115.20199527116391),
zoom: 18,
panControl: false,
zoomControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.BOTTOM_LEFT
},
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
rotateControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_pan"), mapOpt);
infoWindow = new google.maps.InfoWindow({
maxWidth: 1000,
map: null
});
var latlng = [];
var koordinat = "-8.655824,115.202006;-8.655126439051644,115.20159862394485;-8.654917637594707,115.2017603435578;-8.654733290915663,115.20200599999998;-8.65491963015728,115.2022511163882;-8.655127972581871,115.20241248047432;-8.655824,115.202006";
var koor = koordinat.split(";");
for (var j = 0; j < koor.length; j++) {
var kordi = koor[j].split(",");
var lat = kordi[0];
var lng = kordi[1];
latlng[j] = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
}
polygon[1] = new google.maps.Polygon({
map: map,
paths: latlng,
strokeColor: '#000',
strokeOpacity: 0.4,
strokeWeight: 1,
fillColor: '#fff',
fillOpacity: 0.9,
draggable: false,
geodesic: true
});
bindInfoWindow(polygon[1], map, infoWindow, "hello");
}
function bindInfoWindow(polygon, map, infoWindow, html) {
google.maps.event.addListener(polygon, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map);
var titik = polygon.getPath().getAt(0);
infoWindow.setPosition(titik);
map.panTo(titik);
});
}
function...