How to Zoom In further in google map to show markers clearly

Question

I have got four markers which will be shown when i zoom in till the last .

The issue i am facing is that the markers one and four are overlapping with each other , and i cannot zoom zoom in further to click on them ?

Is there any solution for this without using Marker cluster??

some part of my code

function addMarker(response, lator, lonor, infowindow) {
    if (response.length > 0) {
        var global_markers = [];
        for (var i = 0; i < response.length; i++) {
            var lat = parseFloat(response[i].latitude);
            var lng = parseFloat(response[i].longititude);
            var dealername = response[i].name;
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat, lng),
                    map: map,
                    title: "Dealer name: " + dealername,
                    icon: 'http://maps.google.com/mapfiles/marker.png'
                });
                global_markers[i] = marker;

                google.maps.event.addListener(map, 'click', function() {
                    infowindow.close();
                });
        }
    }
}

This is my fiddle

http://jsfiddle.net/3VXTL/13/

Please let me know how to resolve this ??

Answer 1

One option is to make the markers smaller (use the "measle" little red do).

updated fiddle

code snippet:

var response = [{
  "longititude": "78.377665",
  "latitude": "17.439669",
  "name": "one"
}, {
  "longititude": "78.377617",
  "latitude": "17.439692",
  "name": "two"
}, {
  "longititude": "78.377644",
  "latitude": "17.439674",
  "name": "three"
}, {
  "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: 7,
    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 global_markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < response.length; i++) {
      var lat = parseFloat(response[i].latitude);
      var lng = parseFloat(response[i].longititude);
      var dealername = response[i].name;
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: "Dealer name: " + dealername,
        icon: {
          url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
          size: new google.maps.Size(7, 7),
          anchor: new google.maps.Point(3.5, 3.5)
        }
      });
      bounds.extend(marker.getPosition());
      global_markers[i] = marker;

      google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
      });
    }
    map.fitBounds(bounds);
  }
}

body,
html,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas" "></div>

If that is not enough, you could change the zIndex of the markers that overlap when you click on one of them (like this question: allow user to move marker position back (z-index?) in google maps custom map).