Markers disappearing in google maps
<p>I have a situation that is somewhat hard to explain, whence the approximative title (and I'm totally new at google maps API)</p>

<p>I created some markers in a google map with their javascript API (v3) and positioned them with gps coordinates coming from my own API. The issue is that when I get to the left border of the map (or right, as you want) those markers just disappear. I don't mean some custom borders that I've set, I mean the borders of the world. And when I go farther, they come back. They disappear when I cross one of those lines, as seen in this image:</p>

<p><a href="https://i.stack.imgur.com/c7p6I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c7p6I.png" alt="google maps border"></a></p>

<p>My markers are from the center of the map (Europe), it's like when I cross one of those line, let's say from the left just a little bit, the script starts to load the markers on the left map, which I don't see because I zoomed, and I'm still on the right map.  </p>

<p>Sorry, quite hard to explain. Here's my complete script:</p>

<pre><code>var map;
var markers = []; // this will hold all the markers on the map
// google maps API callback, we init the map
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 30, lng: 10.3}, // FIXME
    zoom: 2, // default zoom
    styles: map_style, // dark style
    disableDefaultUI: false, // FIXME
    minZoom: 3, // the maximum zoom-out
    maxZoom: 15, // the maximum zoom-in: we can't set this to higher values because the pictures would be
                 // at their exact locations, if somebody takes a picture in his home, this would show the
                 // exact location of his home
  });

  // first time idle (when map is loaded) XXX: think about this design, can do better
  google.maps.event.addListenerOnce(map, 'idle', function(){
    // we get the gps coords of the current view's bounds
    var view_bounds = map.getBounds();
    var NE = view_bounds.getNorthEast();
    var SW = view_bounds.getSouthWest();

    // we need NW and SE but the API only gives us NE and SW, so a little bit of conversion...
    var NW = new google.maps.LatLng(NE.lat(), SW.lng());
    var SE = new google.maps.LatLng(SW.lat(), NE.lng());

    var tl_lat = NW.lat();
    var tl_long = NW.lng();
    var br_lat = SE.lat();
    var br_long = SE.lng();

    // get the newest pictures in those bounds
    get_newest_pictures(tl_lat, tl_long, br_lat, br_long);
  });

  // when the user stops dragging, check for pictures in the view bounds
  google.maps.event.addListener(map, 'dragend', function(e){
    // clear all markers
    deleteMarkers();

    // we get the gps coords of the current view's bounds
    // need North West lat &amp; long, and South East lat &amp; long
    var view_bounds = map.getBounds();
    var NE = view_bounds.getNorthEast();
    var SW = view_bounds.getSouthWest();

    // we need NW and SE but the API only gives us NE and SW, so a little bit of conversion...
    var NW = new google.maps.LatLng(NE.lat(), SW.lng());
    var SE = new google.maps.LatLng(SW.lat(), NE.lng());

    var tl_lat = NW.lat();
    var tl_long = NW.lng();
    var br_lat = SE.lat();
    var br_long = SE.lng();

    // get the newest pictures in those bounds
    get_newest_pictures(tl_lat, tl_long, br_lat, br_long);
  });
}

// get the newest pictures in an area (in bounds)
function get_newest_pictures(tl_lat, tl_long, br_lat, br_long) {

  var pictures;

  $.ajax({
    url: "http://127.0.0.1:6767/pictures/newest?tl_lat="+tl_lat
                                                        +"&amp;tl_long="+tl_long
                                                        +"&amp;br_lat="+br_lat
                                                        +"&amp;br_long="+br_long,
    success: function(pictures) {
      // parse the return data in JSON
      pictures = JSON.parse(pictures);

      // for each pictures, create a marker at the location
      for (i = 0; i &lt; pictures.length; i++) {
        var coords = new google.maps.LatLng(pictures[i]["gps_lat"], pictures[i]["gps_long"]);
        var marker = new google.maps.Marker({
          position: coords,
          title: "Hello World!",
          icon: "img/pin_newest.png"
        });
        marker["author"] = pictures[i]["author"];
        // push the marker in the markers array
        markers.push(marker);

        // set the marker
        marker.setMap(map);
      }

      console.log(markers);
    },
    error: function(XHR, textStatus, errorThrown) {
      console.log(textStatus);
      console.log(errorThrown);
    },
  });
}

// delete all the markers
function deleteMarkers() {
  for(i = 0; i &lt; markers.length; i++){
    markers[i].setMap(null);
  }
  // empty the markers array
  markers = [];
}
</code></pre>

<p>I also tried to bound the map, but I don't think that's a good idea (and that wasn't working). Is there an "integrated" way to disable those infinite maps, to only have ONE map and not a bunch when I drag to borders? Or anything else that can fix this frustrating "error"?<br>
Thank you!</p>

<p><strong>EDIT</strong>: I'll try to give an example of what's happening.<br>
<strong>This is what I want</strong>: I'm on a google map, I get the borders of the map to get where the user is looking, and in this area (delimited by the top left and bottom right corner which I've got) I want to load every picture that is in it. The pictures are saved with gps coordinates in my database.<br>
Here are the 7 pictures I've got in my database:</p>

<pre><code> id | author | gps_lat  | gps_long
 ---+--------+----------+----------
 31 | user2  |  2.82717 |  95.98167
 32 | user2  | -8.52182 | -51.46316
 33 | user2  | 44.41541 | 143.46929
 34 | user3  | 22.15819 | -77.90592
 35 | user3  | 51.28558 |   9.05738
 36 | user4  | 22.08282 |   9.06114
 37 | user5  | -9.47497 | -46.55858
</code></pre>

<p>When I've got the pictures from my database, I want to display where they are to the user using <em>markers</em>. That's why I'm creating a marker at the place where the picture is for <strong>each</strong> picture. But the user only sees markers where he looks, so if a picture is at Brazil, and he looks at Europe, the response from the database wont even contain the picture at Brazil.</p>

<p>So at the end, I should have markers set in the area the user is looking, and only in this area.</p>

<p><strong>Now that's what is happening</strong>: I've put some debug code to see the array of markers I have on the map, so I can see which picture I have. I've added <code>console.log(markers.length);</code> after of my for loop which sets all the markers to see how many marker I've got and compare this number to the number of markers I see. And this gave me I think informations about what's the problem.
Here is what I see in a normal case:</p>

<p><a href="https://i.stack.imgur.com/xVX5R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xVX5R.png" alt="normal1"></a></p>

<p>Everything is normal, I've got 4 pictures in this area so the script displays me 4 markers. The console prints <code>4</code> for the <code>console.log(markers.length);</code>.</p>

<p>Now another normal case, but just "next to" when it bugs:</p>

<p><a href="https://i.stack.imgur.com/ZKm4d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZKm4d.png" alt="normal2"></a></p>

<p>The console prints <code>2</code>, so everything's fine.<br>
But then, when I go like a few kilometers at the left, when I exit the "bounds" of the map to be on another map, here's what I've got:</p>

<p><a href="https://i.stack.imgur.com/8ugFe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8ugFe.png" alt="bug"></a></p>

<p>Nothing, as you can see. And the console prints <code>4</code>. We see the border line on the map, it's a little bit dark because of the theme. I saw that when I overpass this border line, it starts bugging. It's like it tries to load the markers on the left map, but I'm still on the right map so I can't see them.</p>

<p><strong>EDIT</strong>: Here is the server-side SQL query:</p>

<pre><code>SELECT * FROM pictures
WHERE gps_long BETWEEN SYMMETRIC &lt;tl_long&gt; AND &lt;br_long&gt;
AND gps_lat BETWEEN SYMMETRIC &lt;tl_lat&gt; AND &lt;br_lat&gt;
ORDER BY date_taken DESC LIMIT 50;
</code></pre>