-1

I am trying to display markers on google maps, but some markers are displayed and some are not. I tried with different browsers like Google Chrome and Firefox, but it did not help.

Here is my JavaScript code.

<script type="text/javascript">
//<![CDATA[
var customIcons = {
  icons: {
    default:{
    normal: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    selected: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
  }
};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(40.8833, 260.0167),
    zoom: 5,
    mapTypeId: 'roadmap'
  });
var infoWindow = new google.maps.InfoWindow;
  // Change this depending on the name of your PHP file
  downloadUrl("ip_maps.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var ip_address = markers[i].getAttribute("ip_address");
      var city_location = markers[i].getAttribute("city_location");
      var isp = markers[i].getAttribute("isp");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + ip_address + "</b>" +",\n" + city_location +",\n"  + isp;
      var icon = customIcons[isp] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}
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>

I got this code from here https://developers.google.com/maps/articles/phpsqlajax_v3. After going through different threads, I learnt that this could be happening because of over_query_limit.

This is how my PostgreSQL database looks

 id |   ip_address    |    city_location     |   lat    |    lng    |                          isp                         
   1 | 74.125.0.0      | Mountain View        | 37.4192  | -122.0574 |  Google
   2 | 23.192.0.0      | Cambridge            | 42.3626  | -71.0843  | Akamai Technologies
   3 | 128.206.0.0     | Columbia             | 38.9033  | -92.1022  | University of Missouri-Columbia
   4 | 207.160.0.0     | Columbia             | 38.8817  | -92.402   | University of Missouri - dba the Missouri Research
   5 | 96.6.0.0        | Amsterdam            | 52.35    | 4.9167    | Akamai Technologies
   6 | 93.0.0.0        | Charleville-mézières | 49.7667  | 4.7167    | SFR
   7 | 89.0.0.0        | Aachen               | 50.7884  | 6.1044    | NetCologne GmbH
   8 | 72.246.0.0      | Boston               | 42.366   | -71.123   | Akamai Technologies
   9 | 69.171.224.0    | Menlo Park           | 37.459   | -122.1781 | Facebook
  10 | 68.80.0.0       | New Castle           | 39.6387  | -75.6195  | Comcast Cable
  11 | 54.241.191.192  | San Jose             | 37.3394  | -121.895  | Amazon Technologies
  12 | 54.208.0.0      | Ashburn              | 39.0335  | -77.4838  | Amazon Technologies
  13 | 54.160.0.0      | Ashburn              | 39.0335  | -77.4838  | Amazon
  14 | 50.16.0.0       | Ashburn              | 39.0335  | -77.4838  | Amazon.com
  15 | 31.0.0.0        |  Unknown             | 52.2333  | 21.0167   | Polkomtel Sp. z o.o.
  16 | 23.234.16.0     | Rowland Heights      | 33.9782  | -117.904  | Defender cloud international llc
  17 | 23.0.0.0        | Cambridge            | 42.3626  | -71.0843  | Akamai Technologies
  18 | 216.115.96.0    | Sunnyvale            | 37.4249  | -122.0074 | Yahoo!
  19 | 205.185.206.128 | Chicago              | 41.8471  | -87.6248  | Highwinds Network Group
  20 | 198.71.44.0     | Ann Arbor            | 42.2734  | -83.7133  | Internet2
  21 | 198.209.0.0     | Columbia             | 38.8817  | -92.402   | University of Missouri - dba the Missouri Research
  22 | 187.0.0.0       | Nova Prata           | -28.7833 | -51.6     | Adylnet Acesso A internet Ltda
  23 | 184.169.128.0   | San Jose             | 37.3394  | -121.895  | Amazon.com
  24 | 173.192.0.0     | Dallas               | 32.7831  | -96.8067  | SoftLayer Technologies
  25 | 157.60.0.0      | Redmond              | 47.6801  | -122.1206 | Microsoft Corporation
  26 | 157.56.0.0      | Redmond              | 47.6801  | -122.1206 | Microsoft bingbot
  27 | 157.54.0.0      | Redmond              | 47.6801  | -122.1206 | Microsoft Corporation
  28 | 129.237.0.0     | Lawrence             | 38.9525  | -95.2756  | University of Kansas

The markers that are displayed are id = 1,3,4,5,6,7,9,10,14,15,16,17,18,,19,20,22,23,24,27,28 and the markers that are not displayed are id = 2,8,11,12,13,21,25,26.

Here is the .xml file

  <markers>
<marker ip_address="74.125.0.0" city_location="Mountain View" lat="37.4192" lng="-122.0574" isp="Google"/>
<marker ip_address="23.192.0.0" city_location="Cambridge" lat="42.3626" lng="-71.0843" isp="Akamai Technologies"/>
<marker ip_address="128.206.0.0" city_location="Columbia" lat="38.9033" lng="-92.1022" isp="University of Missouri-Columbia"/>
<marker ip_address="207.160.0.0" city_location="Columbia" lat="38.8817" lng="-92.402" isp="University of Missouri - dba the Missouri Research"/>
<marker ip_address="96.6.0.0" city_location="Amsterdam" lat="52.35" lng="4.9167" isp="Akamai Technologies"/>
<marker ip_address="93.0.0.0" city_location="Charleville-mézières" lat="49.7667" lng="4.7167" isp="SFR"/>
<marker ip_address="89.0.0.0" city_location="Aachen" lat="50.7884" lng="6.1044" isp="NetCologne GmbH"/>
<marker ip_address="72.246.0.0" city_location="Boston" lat="42.366" lng="-71.123" isp="Akamai Technologies"/>
<marker ip_address="69.171.224.0" city_location="Menlo Park" lat="37.459" lng="-122.1781" isp="Facebook"/>
<marker ip_address="68.80.0.0" city_location="New Castle" lat="39.6387" lng="-75.6195" isp="Comcast Cable"/>
<marker ip_address="54.241.191.192" city_location="San Jose" lat="37.3394" lng="-121.895" isp="Amazon Technologies"/>
<marker ip_address="54.208.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon Technologies"/>
<marker ip_address="54.160.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon"/>
<marker ip_address="50.16.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon.com"/>
<marker ip_address="31.0.0.0" city_location=" Unknown" lat="52.2333" lng="21.0167" isp="Polkomtel Sp. z o.o."/>
<marker ip_address="23.234.16.0" city_location="Rowland Heights" lat="33.9782" lng="-117.904" isp="Defender cloud international llc"/>
<marker ip_address="23.0.0.0" city_location="Cambridge" lat="42.3626" lng="-71.0843" isp="Akamai Technologies"/>
<marker ip_address="216.115.96.0" city_location="Sunnyvale" lat="37.4249" lng="-122.0074" isp="Yahoo!"/>
<marker ip_address="205.185.206.128" city_location="Chicago" lat="41.8471" lng="-87.6248" isp="Highwinds Network Group"/>
<marker ip_address="198.71.44.0" city_location="Ann Arbor" lat="42.2734" lng="-83.7133" isp="Internet2"/>
<marker ip_address="198.209.0.0" city_location="Columbia" lat="38.8817" lng="-92.402" isp="University of Missouri - dba the Missouri Research"/>
<marker ip_address="187.0.0.0" city_location="Nova Prata" lat="-28.7833" lng="-51.6" isp="Adylnet Acesso A internet Ltda"/>
 <marker ip_address="184.169.128.0" city_location="San Jose" lat="37.3394" lng="-121.895" isp="Amazon.com"/>
 <marker ip_address="173.192.0.0" city_location="Dallas" lat="32.7831" lng="-96.8067" isp="SoftLayer Technologies"/>
 <marker ip_address="157.60.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft Corporation"/>
 <marker ip_address="157.56.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft bingbot"/>
<marker ip_address="157.54.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft Corporation"/>
 <marker ip_address="129.237.0.0" city_location="Lawrence" lat="38.9525" lng="-95.2756" isp="University of Kansas"/>
 </markers>

Here is my .php file

 <?php
 ini_set('display_errors', 1);
 //phppsql_genxml.php

 function parseToXML($htmlStr)
 {
 $xmlStr=str_replace('<','&lt;',$htmlStr);
 $xmlStr=str_replace('>','&gt;',$xmlStr);
 $xmlStr=str_replace('"','&quot;',$xmlStr);
 $xmlStr=str_replace("'",'&#39;',$xmlStr);
 $xmlStr=str_replace("&",'&amp;',$xmlStr);
 return $xmlStr;
 }

 $dbh = pg_connect("host=localhost port=5432 dbname=ip_database user=postgres password=something");
 if (!$dbh) {
 die("Error in connection: " . pg_last_error());
  }

  // execute query

 $sql = "SELECT ip_address, city_location, lat, lng, isp FROM  markers";
 $result = pg_query($dbh, $sql);
 if (!$result) {

 die("Error in SQL query: " . pg_last_error());
  }

 header("Content-type: text/xml");

   // Start XML file, echo parent node
   echo '<markers>';

    // Iterate through the rows, printing XML nodes for each
       while ($row = pg_fetch_array($result)){
     // ADD TO XML DOCUMENT NODE
     echo '<marker ';
     echo 'ip_address="' . parseToXML($row['ip_address']) . '" ';                               

     echo 'city_location="' . parseToXML($row['city_location']) . '"   ';
     echo 'lat="' . $row['lat'] . '" ';
     echo 'lng="' . $row['lng'] . '" ';
         echo 'isp="' . parseToXML($row['isp']) . '" ';
     echo '/>';
     }
    // End XML file
    echo '</markers>';
      ?>

Everything works fine, except that out of 28 markers only 8 are displayed as mentioned above.How can I fix this? I want to display large number of markers.

Any help with this would be appreciated. Thank you

Swatesh Pakhare
  • 7
  • 4
  • Which markers are shown? Which aren't? Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates your issue, along with a description of how to replicate it. – geocodezip Apr 12 '16 at 19:54
  • @geocodezip Apologies for that. I made the necessary changes to the post by adding `.php file` , `.xml file` and `my database information`. I am a rookie with web development stuff so did not know what all things to add. Every thing works fine except 8 markers out of 28 are not displayed. I have mentioned which ones are not displayed. – Swatesh Pakhare Apr 12 '16 at 20:54
  • @geocodezip if I zoom in, I should be able to see the overlapping markers right ? There has to be some way to view the overlapped markers. Help – Swatesh Pakhare Apr 12 '16 at 21:45
  • If they are at exactly the same location, you won't be able to see any except the top one. There are existing questions that deal with overlapping markers. One option the [OverlappingMarkerSpiderfier](http://stackoverflow.com/search?q=OverlappingMarkerSpiderfier), another is to [play with the zIndex of the markers so you can change the top marker on the stack (so you can click on it)](http://stackoverflow.com/questions/29279202/allow-user-to-move-marker-position-back-z-index-in-google-maps-custom-map). – geocodezip Apr 12 '16 at 21:49
  • @geocodezip In order to use Overlapping Marker Spiderfier, do I need to define an array that would store duplicates of each lat/lng? – Swatesh Pakhare Apr 13 '16 at 01:47
  • That is a different question. – geocodezip Apr 13 '16 at 01:53

1 Answers1

1

Your "missing" markers are duplicates (there are other markers on top of them).

code snippet:

var customIcons = {
  icons: {
    default: {
      normal: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
      selected: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    }
  }
};
var gmarkers = [];

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(40.8833, 260.0167),
    zoom: 5,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;
  // Change this depending on the name of your PHP file
  // downloadUrl("ip_maps.php", function(data) {
  // var xml = data.responseXML;
  var xml = xmlParse(xmlStr);
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  document.getElementById('info').innerHTML = "markers.length=" + markers.length;
  for (var i = 0; i < markers.length; i++) {
    var ip_address = markers[i].getAttribute("ip_address");
    var city_location = markers[i].getAttribute("city_location");
    var isp = markers[i].getAttribute("isp");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    bounds.extend(point);
    var html = "<b>" + ip_address + "</b>" + ",\n" + city_location + ",\n" + isp;
    var icon = customIcons[isp] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon,
      shadow: icon.shadow
    });
    bindInfoWindow(marker, map, infoWindow, html);
    document.getElementById('sidebar').innerHTML += "<a href='javascript:myclick(" + i + ");'>marker " + (i+1) + "</a><br>";
    for (var j = 0; j < gmarkers.length; j++) {
      if (point.equals(gmarkers[j].getPosition())) {
        document.getElementById('sidebar').innerHTML += "(duplicate of " + (j+1) + ")";
        break;
      }
    }
    document.getElementById('sidebar').innerHTML += "<br>";
    gmarkers.push(marker);
  }
  map.fitBounds(bounds);
  // });
}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], 'click');
}

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

var xmlStr = '<markers><marker ip_address="74.125.0.0" city_location="Mountain View" lat="37.4192" lng="-122.0574" isp="Google"/><marker ip_address="23.192.0.0" city_location="Cambridge" lat="42.3626" lng="-71.0843" isp="Akamai Technologies"/><marker ip_address="128.206.0.0" city_location="Columbia" lat="38.9033" lng="-92.1022" isp="University of Missouri-Columbia"/><marker ip_address="207.160.0.0" city_location="Columbia" lat="38.8817" lng="-92.402" isp="University of Missouri - dba the Missouri Research"/><marker ip_address="96.6.0.0" city_location="Amsterdam" lat="52.35" lng="4.9167" isp="Akamai Technologies"/><marker ip_address="93.0.0.0" city_location="Charleville-mézières" lat="49.7667" lng="4.7167" isp="SFR"/><marker ip_address="89.0.0.0" city_location="Aachen" lat="50.7884" lng="6.1044" isp="NetCologne GmbH"/><marker ip_address="72.246.0.0" city_location="Boston" lat="42.366" lng="-71.123" isp="Akamai Technologies"/><marker ip_address="69.171.224.0" city_location="Menlo Park" lat="37.459" lng="-122.1781" isp="Facebook"/><marker ip_address="68.80.0.0" city_location="New Castle" lat="39.6387" lng="-75.6195" isp="Comcast Cable"/><marker ip_address="54.241.191.192" city_location="San Jose" lat="37.3394" lng="-121.895" isp="Amazon Technologies"/><marker ip_address="54.208.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon Technologies"/><marker ip_address="54.160.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon"/><marker ip_address="50.16.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon.com"/><marker ip_address="31.0.0.0" city_location=" Unknown" lat="52.2333" lng="21.0167" isp="Polkomtel Sp. z o.o."/><marker ip_address="23.234.16.0" city_location="Rowland Heights" lat="33.9782" lng="-117.904" isp="Defender cloud international llc"/><marker ip_address="23.0.0.0" city_location="Cambridge" lat="42.3626" lng="-71.0843" isp="Akamai Technologies"/><marker ip_address="216.115.96.0" city_location="Sunnyvale" lat="37.4249" lng="-122.0074" isp="Yahoo!"/><marker ip_address="205.185.206.128" city_location="Chicago" lat="41.8471" lng="-87.6248" isp="Highwinds Network Group"/><marker ip_address="198.71.44.0" city_location="Ann Arbor" lat="42.2734" lng="-83.7133" isp="Internet2"/><marker ip_address="198.209.0.0" city_location="Columbia" lat="38.8817" lng="-92.402" isp="University of Missouri - dba the Missouri Research"/><marker ip_address="187.0.0.0" city_location="Nova Prata" lat="-28.7833" lng="-51.6" isp="Adylnet Acesso A internet Ltda"/> <marker ip_address="184.169.128.0" city_location="San Jose" lat="37.3394" lng="-121.895" isp="Amazon.com"/> <marker ip_address="173.192.0.0" city_location="Dallas" lat="32.7831" lng="-96.8067" isp="SoftLayer Technologies"/> <marker ip_address="157.60.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft Corporation"/> <marker ip_address="157.56.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft bingbot"/><marker ip_address="157.54.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft Corporation"/> <marker ip_address="129.237.0.0" city_location="Lawrence" lat="38.9525" lng="-95.2756" isp="University of Kansas"/> </markers>';

google.maps.event.addDomListener(window, "load", load);

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#sidebar {
  -webkit-columns: 150px 4;
  -moz-columns: 150px 4;
  columns: 150px 4;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="sidebar"></div>
<div id="map"></div>
geocodezip
  • 158,664
  • 13
  • 220
  • 245