JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>
CSS
html,body,#map{
margin:0;
padding:0;
height:100%;
}
JavaScript
$(window).load(function (){
var places={
restaurant:{
label:'restaurants',
//the category may be default-checked when you want to
//uncomment the next line
//checked:true,
icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.png' ,
items: [
['Melt Bar and Grill', 41.485345, -81.799047],
['Sloane Pub', 41.486182, -81.824178],
['Spitfire Salon', 41.479670, -81.768430],
['Mahall\'s', 41.476989, -81.781094],
['Szechwan Garden', 41.485615, -81.787890]
]
},
park:{
label:'parks',
//the category may be default-checked when you want to
//uncomment the next line
//checked:true,
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
items: [
['Lakewood Park', 41.494457, -81.797605],
['Madison Park', 41.476969, -81.781929],
['Tuland Park', 41.464052, -81.788041]
]
}
},
map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 14,
center: new google.maps.LatLng(41.485345, -81.799047),
}
),
infowindow = new google.maps.InfoWindow(),
// a div where we will place the buttons
ctrl=$('<div/>').css({background:'#fff',
border:'1px solid #000',
padding:'4px',
margin:'2px',
textAlign:'center'
});
//show all-button
ctrl.append($('<input>',{type:'button',value:'show all'})
.click(function(){
$(this).parent().find('input[type="checkbox"]')
.prop('checked',true).trigger('change');
}));
ctrl.append($('<br/>'));
//clear all-button
ctrl.append($('<input>',{type:'button',value:'clear all'})
.click(function(){
...