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 marker;
var infowindow = new google.maps.InfoWindow({});
function buttonCarros(buttonCarrosDiv, map_canvas) {
// Control border
var buttonCarrosUI = document.createElement('div');
buttonCarrosUI.style.backgroundColor = '#fff';
buttonCarrosUI.style.border = '1px solid #717B87';
buttonCarrosUI.style.borderRadius = '3px';
buttonCarrosUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
buttonCarrosUI.style.cursor = 'pointer';
buttonCarrosUI.style.marginBottom = '5px';
buttonCarrosUI.style.textAlign = 'center';
buttonCarrosUI.title = 'Clique para ver os carros';
buttonCarrosDiv.appendChild(buttonCarrosUI);
// Control interior
var buttonCarrosText = document.createElement('div');
buttonCarrosUI.style.color = 'rgb(25,25,25)';
buttonCarrosUI.style.fontFamily = 'Roboto,Arial,sans-serif';
buttonCarrosUI.style.fontSize = '13px';
buttonCarrosUI.style.lineHeight = '38px';
buttonCarrosUI.style.paddingLeft = '5px';
buttonCarrosUI.style.paddingRight = '5px';
buttonCarrosUI.innerHTML = 'Carros';
buttonCarrosUI.appendChild(buttonCarrosText);
google.maps.event.addDomListener(buttonCarrosUI, 'click', function () {
var data = JSON;
var myLatLng;
if (marker && marker.setMap) {
if (marker.getMap() != null) marker.setMap(null);
else marker.setMap(map_canvas);
} else {
$.each(data.markers, function (i, markerInfo) {
myLatLng = new google.maps.LatLng(markerInfo.latitude, markerInfo.longitude);
marker = new google.maps.Marker({
position: myLatLng,
map: map_canvas,
title: markerInfo.title
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(marker.getTitle());
infowindow.open(map_canvas, marker);
});
});
...