JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=en®ion=GB"></script>
<div id="map" style="height: 400px;"></div>
JavaScript
var map;
var zoomLimit = 6;
var dealer_markers = [{
sales: '1',
aftersales: '0',
name: 'Bob One',
lat: '51.595212',
lng: '-2.400068',
adr: 'Some Address',
pc: 'In Some Place',
tel: '21312312312',
url: '.',
avr: '',
position: '1'
},
{
sales: '0',
aftersales: '1',
name: 'Bob Two',
lat: '52.306323',
lng: '0.000778',
adr: 'Some Address',
pc: 'Some Place',
tel: '213213123123',
url: '.',
avr: '',
position: '2'
},
{
sales: '1',
aftersales: '1',
name: 'Bob Three',
lat: '51.742384',
lng: '-0.488795',
adr: 'Another address',
pc: 'More place',
tel: '23423423423',
url: '',
avr: '',
position: '3'
}];
function _newGoogleMapsMarker(param) {
var r = new google.maps.Marker({
map: param._map,
position: new google.maps.LatLng(param._lat, param._lng),
title: param._head,
icon: "http://downloadicons.net/sites/default/files/map-marker-icons-2254.png",
originalicon: "http://downloadicons.net/sites/default/files/map-marker-icons-2254.png",
hovericon: "http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/map-marker-icon.png"
});
if (param._data) {
google.maps.event.addListener(r, 'click', function() {
// this -> the marker on which the onclick event is being attached
if (!this.getMap()._infoWindow) {
this.getMap()._infoWindow = new google.maps.InfoWindow();
}
this.getMap()._infoWindow.close();
this.getMap()._infoWindow.setContent(param._data);
this.getMap()._infoWindow.open(this.getMap(), this);
});
google.maps.event.addListener(r, 'mouseover', function() {
this.setIcon(this.hovericon);
});
google.maps.event.addListener(r, 'mouseout', function() {
this.setIcon(this.originalicon);
});
}
return r;
}
function init() {
var mO = {
...