カスタム マーカーを使用して Google マップを作成しました。
プロジェクトは 10 か月からオンラインです。すべてが正常に機能していたのに、突然すべてのカスタム マーカーが見えなくなりました。
以前は、マップは次のようでした。
最近コードを変更していません。バックアップを復元しましたが、問題はまだ解決していません。
何が起こっているのか理解するのを手伝ってもらえますか?
Google マップ プロジェクトをオンラインで表示するには、ここをクリックしてください。
マップを使用するには、マップの下部にあるリンク (Invisibles_décalcomanie xx) をクリックするだけです。リンクはマップを座標に移動します。
私は何かに気づいた。ユーザーがマップをズームアウトすると、マーカーが表示されます (画像を参照)。しかし、それらは間違った場所にあり、ユーザーがズームインすると消えてしまいます。
バグですか？私のコードが間違っている可能性があります。または、Google は最近 API に何かを変更しましたか?
Javascript コード (ソース コードの下部にあるデモで確認できます):
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);
}