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" style="border: 2px solid #3872ac;"></div>
CSS
html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
var ContactUs = function () {
return {
//main function to initiate the module
init: function () {
var neighborhoods = [{
lat: 41.02688344,
lng: 28.97104517,
icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
content: "a"
}, {
lat: 41.07992535,
lng: 29.02025431,
icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
content: "b"
}, {
lat: 41.059097,
lng: 28.983857,
icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
content: "c"
}, {
lat: 41.08476948,
lng: 28.97748649,
icon: 'http://maps.google.com/mapfiles/ms/micons/orange.png',
content: "d"
}, {
lat: 41.05635465,
lng: 28.95114452,
icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
content: "e"
}];
var markers = [];
var map;
var infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 41.052244,
lng: 28.985637
}
});
function addMarkerWithTimeout(position, timeout, icon, content) {
window.setTimeout(function () {
var marker = new google.maps.Marker({
position: position,
map: map,
animation: google.maps.Animation.DROP,
icon: icon
});
google.maps.event.addListener(marker,'click', function(e) {
infowindow.setContent(content);
...