JSFiddle - React, Tailwind, and code Playground
by Sven Albrecht
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-canvas {
height: 500px;
width:800px;
margin: 0px;
padding: 0px
}
</style>
<script>
function initialize() {
var infos = [];
var locations = [
['Marker 1', 54.08655, 13.39234, 2],
['Marker 2', 53.56783, 13.27793, 1]
];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
content: locations[i][0]
});
bounds.extend(marker.position);
var openedInfoWindow = null;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function() {
console.log('Klick! Marker='+this.content);
if(openedInfoWindow != null){
openedInfoWindow.close();
openedInfoWindow = null;
}else{
infowindow.setContent(this.content);
infowindow.open(map, this);
openedInfoWindow = infowindow;
google.maps.event.addListener(infowindow, 'closeclick', function() {
openedInfoWindow = null;
});
}
}));
google.maps.event.trigger(marker, 'click');
}
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(8);
google.maps.event.removeListener(listener);
});
}
function loadScript() {
var script =...