JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_compiled.js"></script>
<body>
<div id="map_canvas" style="height:800px; width:700px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</body>
JavaScript
var response = [
{
"longititude": "78.377665",
"latitude": "17.439669",
"name": "one"
},
{
"longititude": "78.377665",
"latitude": "17.439667",
"name": "four"
}
]
initializeCalllater(18.1124372, 79.01929969999999, response);
function initializeCalllater(lator, lonor, response) {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lator, lonor);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.trigger(map, 'resize');
map.setCenter(new google.maps.LatLng(lator, lonor));
var infowindow = new google.maps.InfoWindow({});
addMarker(response, lator, lonor, infowindow);
}
function addMarker(response, lator, lonor, infowindow) {
if (response.length > 0) {
var bounds = new google.maps.LatLngBounds();
var global_markers = [];
for (var i = 0; i < response.length; i++) {
var lat = parseFloat(response[i].latitude);
var lng = parseFloat(response[i].longititude);
var check = checkifgotsameLatitude(response,lat,lng, i + 1);
if(check>=2)
{
lat = lat+0.222;
}
var dealername = response[i].name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: "Dealer name: " + lat,
icon: 'http://maps.google.com/mapfiles/marker.png'
});
bounds.extend(marker.getPosition());
global_markers[i] = marker;
google.maps.event.addListener(map, 'click', function() {
...