JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<div id="map_canvas" ></div>
CSS
html,body,#map_canvas{margin:0;padding:0;height:100%}
JavaScript
var shops = {
1: {
latLng: new google.maps.LatLng(52.5498783, 13.425209099999961),
'type': 'food'
},
2: {
latLng: new google.maps.LatLng(52.5598783, 13.435209099999961),
'type': 'music'
},
3: {
latLng: new google.maps.LatLng(52.5698783, 13.445209099999961),
'type': 'shoes'
}
}
function showShops() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(52.5598783, 13.435209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
function showMore(id) {
alert('my id is ' + id);
}
var infowindow = new google.maps.InfoWindow();
for (var k in shops) {
(function (id) {
console.log(k)
var marker = new google.maps.Marker({
map: map,
position: shops[id].latLng
});
var content = document.createElement('div'),
button;
content.innerHTML = 'I sell ' + shops[id].type + '<br/>';
button = content.appendChild(document.createElement('input'));
button.type = 'button';
button.value = 'click me!'
google.maps.event.addDomListener(button, 'click', function () {
showMore(id);
})
google.maps.event.addListener(marker, 'click', function () {
infowindow.setOptions({
content: content,
map: map,
...