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 :
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.
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 = '<div class="popup">Arnaud Théval<br/>Invisibles_décalcomanie '+j+'/36<br/>2012<br/><a href="http://www.arnaudtheval.com/1-46-invisibles-decalcomanie.php" target="_blank" >en savoir +</a><br/><br/><a href="google-map/img/photos/THEVAL-decalcomanie-'+j+'a.jpg" class="fancybox" title="Invisibles_décalcomanie '+j+'" ><img src="google-map/img/THEVAL-decalcomanie-'+j+'a.jpg" width="'+myLatlng[j][2]+'" height="'+myLatlng[j][3]+'"/></a><a href="google-map/img/photos/THEVAL-decalcomanie-'+j+'b.jpg" class="fancybox" title="Invisibles_décalcomanie '+j+'"><img class="image_2" src="google-map/img/THEVAL-decalcomanie-'+j+'b.jpg" width="'+myLatlng[j][4]+'" height="'+myLatlng[j][5]+'"/></a></div>';
//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);
}
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