Как увеличить Далее на карте Google, чтобы четко показать маркеры

Question

У меня есть четыре маркера, которые будут отображаться, когда я увеличиваю масштаб до последнего.

Проблема я столкнулся в том, что маркеры один и четыре перекрываются друг с другом, и я не могу увеличить масштаб в дальнейшем, чтобы нажать на них?

Есть ли решение для этого без использования кластера маркеров?

какая-то часть моего кода

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(); 
       }); 
     } 
    } 
} 

Это моя скрипка

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

Пожалуйста, дайте мне знать, как решить эту проблему ??

Answer 1

Один из вариантов заключается в том, чтобы сделать маркеры меньшими (используйте «кори» немного красного цвета).

updated fiddle

фрагмент кода:

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>

Если этого недостаточно, вы можете изменить ZIndex маркеров, которые перекрывают друг друга при нажатии на одну из них (как этот вопрос: allow user to move marker position back (z-index?) in google maps custom map).