how to handle conflict of two marker in google map using javascript

Question

i trying to create multiple markers on Google map using java script, here problem arise when two markers have the same Geo Location, if such two markers arise then other markers which occur after this marker are not display on the map, please guide me if anybody has the solution.

var geocoder;
var map;
var geocoder = new google.maps.Geocoder();
var newLocation =[];
var SelectIndex =0;
var Markers =[];
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/pin.jpg';
var InfoWindowContent ;

var MarkerJson = eval('{{$json_data}}');
console.log(MarkerJson);

var Markers = [];
var i=0;

var Media;

for(var Marker in MarkerJson)
{  
  if(MarkerJson[Marker].media_type == '1')
  {
     Media = '{{$BASE_URL}}add_images/thumb/'+MarkerJson[Marker].image_video_name; 
  }
  else
  {
    Media =  '{{$BASE_URL}}add_images/thumb/play_back.png';
  }
  Markers[i] = ['<div class="info_abstract"><div class="first_show">'+MarkerJson[Marker].title+'</div><div class="second_show"><img src="'+Media+'" /></div></div><div class="info_desc"><div class="status_container">'+MarkerJson[Marker].product_status+'</div><div>'+MarkerJson[Marker].desc.substring(0,100)+'</div><div><a class="detail_link"><a href="{{$BASE_URL}}detail-view/'+MarkerJson[Marker].id+'" >View Detail</a></div></div>',Number(MarkerJson[Marker].ad_address_latitude),Number(MarkerJson[Marker].ad_address_longitude),MarkerJson[Marker].city_name,MarkerJson[Marker].desc,i+1];

  i=i+1;
}


geocoder.geocode( { 'address':'{{$CurrentCity}}'}, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
       var mapOpt = {
         center:results[SelectIndex].geometry.location,
         zoom:13,
         mapTypeId:google.maps.MapTypeId.ROADMAP  
      };

      var map=new google.maps.Map(document.getElementById("my-map"),mapOpt);

      var CenterMarker = new google.maps.Marker();

      var infowindow = new google.maps.InfoWindow();

      for(var j=0; j < Markers.length; j++)
      { 
         marker = new google.maps.Marker({
         position: new google.maps.LatLng(Markers[j][1], Markers[j][2]),
         map: map
        });

        InfoWindowContent = Markers[j][0];

       google.maps.event.addListener(marker, 'click', (function(marker, j) {
          return function(InfoWindowContent) {
              infowindow.setContent(Markers[j][0]);
              infowindow.open(map,marker);
            }
         })(marker, j));

      }

   } else {
      alert('{{$lang_var_name.geocode_was_not_successful_for_the_following_reason}}: ' + status);
    }
  });

Answer 1

the way i approach it is by increase the lat & lng of the marker's position if it is duplicated, i created new array that holds all duplicated lat and lng, search through the array, find the lat and lng are exists, get the updated lat and lng, assign it to the marker's position, store the last lat lng in the array.

function getUpdatedLatLng(lt, ln) {
        var amount = 0.004,
            duplicatedLatLng = null,
            lat = parseFloat(lt),
            lng = parseFloat(ln),
            newLat = 0,
            newLng = 0,
            increasedLat = 0,
            increasedLng = 0;
        if (myNamespace.DuplicatedLatLng.length > 0) {
            var obj = null;
            for (var i = 0; i < myNamespace.DuplicatedLatLng.length; i++) {
                var item = myNamespace.DuplicatedLatLng[i];
                if (item.Lat == lat && item.Lng == lng) {
                    obj = item;
                    break;
                }
            }
            if (obj) { // if latlng found in the duplicated array then increase the lat and lng, create the new latlng obj.
                increasedLat = (++obj.LatIncrease);
                increasedLng = (++obj.LngIncrease);
                newLat = (obj.Lat + (amount * increasedLat));
                newLng = (obj.Lng + (amount * increasedLng));
            } else { // if latlng didn't found in the duplicated array; then create new latlng and add to array.
                newLat = (lat + amount);
                newLng = (lng + amount);
                increasedLat = 1;
                increasedLng = 1;
            }
        }
        else { // if nothing is in the duplicated array, then create the new latlng item and add to the array.
            newLat = (lat + amount);
            newLng = (lng + amount);
            increasedLat = 1;
            increasedLng = 1;
        }
        duplicatedLatLng = new myNamespace.DuplicatedLatLngItem(lat, lng, increasedLat, increasedLng);
        myNamespace.DuplicatedLatLng.push(duplicatedLatLng);

        // return new latlng
        return new google.maps.LatLng(newLat, newLng);
    }

// Constructor: used for updating new latlng. Saved in myNamespace.DuplicatedLatLng array.
DuplicatedLatLngItem: function (lat, lng, latIncrease, lngIncrease) {
    this.Lat = lat;
    this.Lng = lng;
    this.LatIncrease = latIncrease;
    this.LngIncrease = lngIncrease;
}