Google map API 3 / javascript : Markers suddenly become invisible

Question

I've created a google map with custom markers.

The project is online since 10 months. Everything was working fine and suddenly all the custom markers became invisible.

Before, the map was like this :

enter image description here

I didn't changed the code recently. I've restored a back up and the issue is still here.

Can you help me to understand what is going on ?

Click here to see the google map project online.

To use the map, simply click on the links at the bottom of the map (Invisibles_décalcomanie xx). The links move the map to the coordinates.

I've noticed something. The markers can be seen if user zoom out the map (see picture). But they are at the wrong place and disappear if user zoom in.

Google map issue, no markers can be seen

Is it a bug ? My code is maybe wrong. Or Google has changed something to the API recently ?

Javascript code (can be seen on the demo at the bottom of the source code) :

    var markerArray = [];

    function initialize() {

    // Tableau images avatars
    var myLatlng = [
    // Ligne vide sinon décalage dans la boucle pour remplir tableau locations
      [47.263167,-1.579706,300,201,300,201],
      [47.264108,-1.575928,134,201,300,201],
      [47.265203,-1.581125,300,201,300,201],
      [47.259506,-1.568975,300,201,300,201],
      [47.254894,-1.565697,300,201,300,201],
      [47.254617,-1.576264,300,201,134,201],
      [47.261639,-1.571083,300,201,300,201],
      [47.253819,-1.574989,300,201,300,201],
      [47.256592,-1.575986,300,201,300,201],//9
      [47.259722,-1.575022,300,201,180,201],//10
      [47.262311,-1.577317,300,201,300,201],//11
      [47.258419,-1.566647,300,201,300,201],//12
      [47.26115,-1.570781,300,201,300,201],//13
      [47.261325,-1.566986,300,201,300,201],//14
      [47.260411,-1.565275,300,201,300,201],//15
      [47.255786,-1.571194,300,201,300,201],//16
      [47.252592,-1.568464,300,201,300,201],//17
      [47.261639,-1.582647,300,201,300,201],//18
      [47.255919,-1.569056,300,201,300,201],//19
      [47.260525,-1.574483,300,201,300,201],//20
      [47.25915,-1.566611,300,201,300,201],//21
      [47.264331,-1.576933,300,201,300,201],//22
      [47.257569,-1.576986,300,201,300,201],//23
      [47.258964,-1.578256,300,201,300,201],//24
      [47.260611,-1.563364,300,201,300,201],//25
      [47.252789,-1.566597,300,201,300,201],//26
      [47.253031,-1.569664,300,201,300,201],//27
      [47.258797,-1.573606,300,201,300,201],//28
      [47.261233,-1.573161,300,201,300,201],//29
      [47.264911,-1.578775,300,201,300,201],//30
      [47.265519,-1.578975,300,201,300,201],//31
      [47.264847,-1.575,300,201,300,201],//32
      [47.258528,-1.568064,300,201,300,201],//33 en attente erreur
      [47.261619,-1.572919,300,201,300,201],//34
      [47.261642,-1.573192,300,201,300,201],//35
      [47.263653,-1.578083,300,201,300,201]
    ];

        // contient le html
        var locationsInfos;
        //Tableau contient les infos relatives au markeurs, etc.
        var locations = [];

        //Boucle pour remplir le tableau
        for (j = 0; j < 35; j++) { 
        //alert(myLatlng[j][2]); 
        //alert('width : '+myLatlng[j][2]);

        locationsInfos = 'Arnaud Théval
Invisibles_décalcomanie '+j+'/36
2012
en savoir +

';

      //On remplit le tableau
        locations.push([locationsInfos, myLatlng[j][0], myLatlng[j][1], 4,'google-map/img/'+j+'-avatar.png']);
    };// en of loop

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: new google.maps.LatLng(47.259981,-1.575233, 4),
          mapTypeControl: true,
        mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
     navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
        scaleControl: true,
    streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

    //var point = 0;

    // Boucle création marqueurs
    // Loop create markers
   for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: new google.maps.MarkerImage(locations[i][4], new google.maps.Size(60,130), new google.maps.Point(0,0), new google.maps.Point(0, 150)),
        map: map
      });

      // Tableau : on stock les objets markers
      // Array : markers object
      markerArray.push(marker);

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

    // test

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

    }

    // This function picks up the click and opens the corresponding info window
    function openMarker(i) {         
         //To force the click, 
         //you need to call google.maps.event.trigger 
         //which takes two params (instance, event)
         google.maps.event.trigger(markerArray[i], 'click');
         //map.setCenter(marker.position);
}

geocodezip · Accepted Answer

Your map is using v3.10 of the Google Maps API v3, the "released" version. There have been numerous issues with markers once that became the "release" version. As a test, try hardcoding the version to 3.9. To do that, change this line:

to

If that works please raise an issue (or star and existing one), as in approximately 6 months v3.9 goes away for good (when 3.10 becomes "frozen").

The MarkerImage class has also recently been deprecated, replaced by the "Icon" object

Google map API 3 / javascript : Markers suddenly become invisible

Answers (1)

Related Questions