एक ही पते पर Google मार्कर सभी मार्करों को नहीं दिखा रहे हैं

Question

मैं इस नक्शे पर काम कर रहा हूँ - http://www.mediwales.com/mapping/test/

यह कंपनियों की साजिश रच रहा है और उन्हें ठीक कर रहा है, लेकिन एक ही इमारत में एक ही पते वाली कंपनियों के साथ एक समस्या उत्पन्न हो गई है। यह उन सभी के बजाय केवल एक कंपनी दिखा रहा है।

मैं इसे एक ही पते पर सभी कंपनियों को प्रदर्शित करने के लिए कैसे प्राप्त कर सकता हूं?

नाम / संख्या, सड़क, शहर, पोस्ट कोड के निर्माण से मार्करों को जियोकोड किया जाता है। मैं अनुमान लगा रहा हूं कि मार्कर वहां एक इमारत के रूप में हैं, जिसमें 3 कंपनियां हैं जो क्लस्टर में 3 दर्शाती हैं। फिर भी जब आप इसे क्लिक करते हैं, तो यह केवल एक कंपनी को दिखाता है।

अपडेट करें:

मैं उन्हें ऑफसेट करने में कामयाब रहा हूं, लेकिन यह सभी मार्करों को ऑफसेट कर रहा है जब मैं केवल यही चाहता हूं कि अगर एक से अधिक मार्कर एक ही हों तो ऑफसेट करें। (केसी के जवाब के लिए धन्यवाद)।

   <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

    function load() {
      var cluster = [];
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(53.4788, -3.9551),
        zoom: 6,
        mapTypeId: 'roadmap'
      });
var infowindow = new google.maps.InfoWindow();
var min = .999999;
var max = 1.000001;

      // Change this depending on the name of your PHP file
      downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");



          var offsetLat = markers[i].getAttribute("lat") * (Math.random() * (max - min) + min);
          var offsetLng = markers[i].getAttribute("lng") * (Math.random() * (max - min) + min);



          var point = new google.maps.LatLng(offsetLat, offsetLng);
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(markers[i].getAttribute("name"));
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
          cluster.push(marker);
        }
        var mc = new MarkerClusterer(map,cluster);
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>
  </script>

   <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

    function load() {
      var cluster = [];
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(53.4788, -3.9551),
        zoom: 6,
        mapTypeId: 'roadmap'
      });
var infowindow = new google.maps.InfoWindow();

      // Change this depending on the name of your PHP file
      downloadUrl("<?php bloginfo('stylesheet_directory'); ?>/phpsqlajax_genxml.php ", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(markers[i].getAttribute("name"));
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
          cluster.push(marker);
        }
        var mc = new MarkerClusterer(map,cluster);
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>
  </script>

Answer 1

क्लस्टर सही ढंग से प्रदर्शित हो रहा है। सभी मार्करों को प्लॉट किया जा रहा है। समस्या यह है कि आप केवल सबसे अधिक मार्कर पर क्लिक कर सकते हैं, जिससे ऐसा लगता है कि केवल एक ही मार्कर है।

संयोग मार्करों के लिए सामग्री को देखने के लिए, आपको अंतर्निहित मार्करों के infowindow सामग्री को शीर्ष सबसे मार्कर पर पास करना होगा।

ऐसा करने के लिए, सबसे पहले, प्रत्येक मार्कर का ट्रैक रखें। आप मार्कर क्लस्टर का उपयोग कर रहे हैं, इसलिए मार्करक्लेस्टर उदाहरण प्रत्येक मार्कर को रखेगा। जैसा कि प्रत्येक जियोकोड परिणाम वापस आता है, पहले से प्लॉट किए गए सभी मार्करों के साथ उस अनुरोध के latlng की तुलना करें। आप latlng ऑब्जेक्ट के बराबर विधि का उपयोग करके पदों की तुलना कर सकते हैं ।

यदि नया मार्कर मौजूदा मार्कर की स्थिति से मेल खाता है, तो पहले मार्कर से infowindow सामग्री लें और इसे नए मार्कर के infowindow सामग्री में जोड़ें। इस तरह, जब आप शीर्ष सबसे मार्कर (दूसरी कंपनी) पर क्लिक करते हैं, तो यह दोनों कंपनियों से जानकारी दिखाएगा। यदि दो से अधिक कंपनियां हैं, तो आपको सभी मिलान मार्करों के लिए infowindow सामग्री को हथियाने की आवश्यकता होगी। यह विधि मार्कर क्लस्टर को अभी भी मार्करों की सही संख्या प्रदर्शित करने की अनुमति देगा।

यहाँ एक कार्यशील उदाहरण और जावास्क्रिप्ट कोड है। पहले और दूसरे पते समान हैं। जब आप 2 के लिए मार्कर पर क्लिक करते हैं, तो यह "2 और 1" दिखाएगा।

<script type="text/javascript"> 
var map;

//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 17};

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

//geocoder
var geocoder = new google.maps.Geocoder(); 

var address = new Array("1000 Market St, Philadelphia, PA","1000 Market St, Philadelphia, PA","1002 Market St, Philadelphia, PA","1004 Market St, Philadelphia, PA");
var content = new Array("1","2","3","4");

function createMarker(latlng,text) {

    var marker = new google.maps.Marker({
        position: latlng
    });

    ///get array of markers currently in cluster
    var allMarkers = mc.getMarkers();

    //check to see if any of the existing markers match the latlng of the new marker
    if (allMarkers.length != 0) {
        for (i=0; i < allMarkers.length; i++) {
            var currentMarker = allMarkers[i];
            var pos = currentMarker.getPosition();

            if (latlng.equals(pos)) {
                text = text + " & " + content[i];
            }

        }
    }

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

    return marker;
}

function geocodeAddress(address,i) {

    geocoder.geocode( {'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            var marker = createMarker(results[0].geometry.location,content[i]);
            mc.addMarker(marker);

        } else { 
            alert("Geocode was not successful for the following reason: " + status); 
        } 
    });
}

function initialize(){

    var options = { 
        zoom: 13, 
        center: new google.maps.LatLng(39.96225,-75.13222), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map'), options); 

    //marker cluster
    mc = new MarkerClusterer(map, [], mcOptions);

    for (i=0; i<address.length; i++) { 
        geocodeAddress(address[i],i);
    }

}       
</script> 

EDIT: टिप्पणी का जवाब

वैकल्पिक रूप से, आप एक संयोग मार्कर की स्थिति के लिए गुणक (उदाहरण के लिए .999999 और 1.000001 के बीच यादृच्छिक संख्या) को लागू करके संयोग मार्करों को नंगा कर सकते हैं। यहाँ एक उदाहरण है। यह पहले उदाहरण के रूप में एक ही डेटा का उपयोग कर रहा है, सिवाय इसके कि मार्कर 1 और 2 के बजाय एक दूसरे के ऊपर रखा जा रहा है और एक infowindow साझा कर रहा है, मार्कर 2 मार्कर 1 से ऑफसेट है। ध्यान दें कि आपके जियोकोड परिणाम एक होने जा रहे हैं थोड़ा कम सटीक। नीचे दिया गया प्रासंगिक कोड:

//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;

    function createMarker(latlng,text) {

        ///get array of markers currently in cluster
        var allMarkers = mc.getMarkers();

        //final position for marker, could be updated if another marker already exists in same position
        var finalLatLng = latlng;

        //check to see if any of the existing markers match the latlng of the new marker
        if (allMarkers.length != 0) {
            for (i=0; i < allMarkers.length; i++) {
                var existingMarker = allMarkers[i];
                var pos = existingMarker.getPosition();

                //if a marker already exists in the same position as this marker
                if (latlng.equals(pos)) {

                    //update the position of the coincident marker by applying a small multipler to its coordinates
                    var newLat = latlng.lat() * (Math.random() * (max - min) + min);
                    var newLng = latlng.lng() * (Math.random() * (max - min) + min);

                    finalLatLng = new google.maps.LatLng(newLat,newLng);

                }                   
            }
        }

        var marker = new google.maps.Marker({
            position: finalLatLng
        });     

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

        return marker;
    }

Comments

उत्तर के लिए धन्यवाद। बस वापस इस परियोजना के लिए हो रही है! ठीक है, क्या मार्करों को थोड़ा सा ऑफसेट करना संभव होगा? इसमें शामिल कंपनियों का तर्क होगा कि जानकारी विंडो के भीतर कौन शीर्ष पर था (अन्यथा मुझे पता है!)।

— रॉब

अच्छा काम @ कैसी। यह अच्छा दिखता है!

— रयानकैल्टन

@ कैसी जवाब के लिए धन्यवाद, मैं अपने कोड में कैसे काम कर सकता हूं? मैं इस तरह से पुनर्मूल्यांकन कोड के साथ संघर्ष! यहाँ मेरा स्रोत है - दृश्य-स्रोत: mediwales.com/mapping/members

— रोब

@Rob एक गाइड के रूप में मेरे उदाहरण पृष्ठ का उपयोग करें। हमारे कोड के बीच एक बड़ा अंतर यह है कि मैंने अपना जियोकोड एड्रेस कोड से अपना क्रिएट मार्कर कोड निकाला है और इसे createMarker नामक अपने फंक्शन में डाला है। काम करने के लिए आपको नग्नता तकनीक प्राप्त करने के लिए ऐसा करना होगा।

— केसी

@ कैसी मैंने कुछ प्रयास किए हैं और यह काम करने के लिए नहीं मिल सकता है ... मैं यह नहीं चाहता कि मैं ऐसा महसूस करूं जैसे मैं आपको इसे करने के लिए कर रहा हूं, लेकिन मैं आखिरी दिन की कोशिश कर रहा हूं।

— रॉब

Answer 2

मुझे एक ही क्षेत्र / बिक्री के ऐप के लिए ठीक उसी अक्षांश / लंबे समय में कई मार्करों के साथ एक ही समस्या थी। एक ही पते पर कई ग्राहकों के साथ मेरे ऐप में यह एक सामान्य परिदृश्य था, उदाहरण के लिए एक ही गगनचुंबी इमारत में ग्राहक और इस तरह एक ही भौतिक सड़क पते पर।

मुझे ओवरलैपिंग मार्करों के लिए एक बेहतर उपयोगकर्ता अनुभव (UX) के साथ एक वैकल्पिक उत्तर मिला । OverlappingMarkerSpiderfier लाइब्रेरी बनाने के लिए जॉर्ज मैकरॉन को धन्यवाद । Google मैप्स v3 के लिए यह जावास्क्रिप्ट लाइब्रेरी ओवरलैपिंग मार्करों के लिए डिफ़ॉल्ट क्लिक व्यवहार को ओवरराइड करता है। लाइब्रेरी आपको ओवरलैपिंग के लिए ऑफ़सेट त्रिज्या को कॉन्फ़िगर करने में सक्षम बनाती है (डिफॉल्ट को 20 पिक्सेल)।

उदाहरण स्क्रीनशॉट http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html :

Answer 3

मैं उपरोक्त फ़ंक्शन को निम्नानुसार बदलने का प्रस्ताव करता हूं क्योंकि प्राप्त परिणाम मुझे बेहतर लगते हैं।

function adjustMarkerPlace(latlng) {
  ///get array of markers currently in cluster 
  //final position for marker, could be updated if another marker already exists in same position
  var finalLatLng = latlng;

  //check to see if any of the existing markers match the latlng of the new marker
  if (markers.length !== 0) {
      for (let i=0; i < markers.length; i++) {
          var existingMarker = markers[i];
          var pos = existingMarker.getPosition();

          //check if a marker already exists in the same position as this marker
          if (latlng.equals(pos)) {

              //update the position of the coincident marker by applying a small multipler to its coordinates
              var newLat = latlng.lat() + (Math.random() / 10000);
              var newLng = latlng.lng() + (Math.random() / 10000);

              finalLatLng = new google.maps.LatLng(newLat,newLng);

          }
      }
  }

  return finalLatLng;

}