JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="status"></div>
<div id="status"></div>
<div id="map-canvas"></div>
</body>
CSS
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
var map;
var infoWindow;
var service;
var gmarkers = [];
var markerBounds;
var circle;
var diffMap;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-27.984113, 153.411076)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'bounds_changed', performSearch);
google.maps.event.addListener(map, "click", function (e) {
console.log('click' + e);
});
}
function loadScript() {
var script = document.createElement('script'),
myScript = 'https://maps.googleapis.com/maps/api/js?signed_in=true&v=2.exp' + '&libraries=weather,places&sensor;=true_or_false&signed_in=true&callback=initialize®ion=au'
script.type = 'text/javascript';
script.src = myScript;
document.body.appendChild(script);
}
window.onload = loadScript;
function performSearch() {
var request = {
bounds: map.getBounds(),
type: 'establishment'
};
if (!infoWindow) { infoWindow = new google.maps.InfoWindow() };
if (!service) { service = new google.maps.places.PlacesService(map) };
service.radarSearch(request, searchCallback);
}
function searchCallback(results, status, pagination) {
if (results) { console.log('searchCallback, results count is ' + results.length) };
if (status == google.maps.places.PlacesServiceStatus.OK) {
document.getElementById('status').innerHTML = "returned "+results.length+" results";
for (var i=0;i<gmarkers.length;i++){
gmarkers[i].setMap(null);
}
gmarkers = [];
markerBounds = new google.maps.LatLngBounds();
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
if (circle && circle.setMap) {
circle.setMap(null);
}
circle = new google.maps.Circle({radius: 60000, map: map,...