ああ、この問題…… 。
何を求めているのかわからない場合、それは難しいものです。私は数か月前にこれを経験しましたが、StackOverflow であれ、Google マップのドキュメントであれ、正しい答えを見つけるのは恐ろしく困難でした。
このコードが次の人よりも機能する理由を知るつもりはありませんが、私には機能し、プロジェクトに合わせて少し調整すれば、あなたにも機能するはずです.
これが私が使用したコードです。変数名に関しては、私のプロジェクトからいくつかのアーティファクトがありますが、できる限りそのほとんどを取り除き、必要のない部分や変更できる部分をコメントアウトしようとしました。 InfoWindows の望ましい動作。
function initMap(){
bldgNo = new Object(); // YOU CAN GET
bldgName = new Object(); // RID OF ANY
bldgAddr = new Object(); // OF THESE...
bldgGfx = new Object(); //
mainMeter = new Object(); // JUST REPLACE
alarmCount = new Object(); // THEM WITH
latitude = new Object(); // WHAT YOU'LL
longitude = new Object(); // NEED INSTEAD.
markersArray = [];
google.maps.Map.prototype.clearOverlays = function() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
location1 = new google.maps.LatLng(22.413543,-137.075743); // IN CASE YOU'LL NEED MORE
location2 = new google.maps.LatLng(22.628202,-137.426432); // THAN ONE LOCATION? I DID.
myOptions = {
zoom:15, // BEST IS BETWEEN 12-15
scrollwheel:false, // EITHER TRUE OR FALSE
center:location1, // ONE OF THE ABOVE LAT/LNG LOCATIONS
mapTypeId: google.maps.MapTypeId.HYBRID // ROADMAP, SATELLITE, HYBRID, or TERRAIN (all-caps)
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
icon = new google.maps.MarkerImage('images/YOUR-IMAGE-HERE.png',new google.maps.Size(20,34),new google.maps.Point(0,0),new google.maps.Point(10,34));
shadow = new google.maps.MarkerImage('images/YOUR-SHADOW-IMG.png',new google.maps.Size(37,34),new google.maps.Point(0,0),new google.maps.Point(10,34));
infowindow=new google.maps.InfoWindow();
var i=1;
$(".building").each(function(i){
bldgNo[i] = $(this).children(".bldg-no").html(); // YOU CAN GET
bldgName[i] = $(this).children(".bldg-name").html(); // RID OF ANY
bldgAddr[i] = $(this).children(".bldg-address").html(); // OF THESE...
bldgGfx[i] = $(this).children(".bldg-graphic").html(); //
mainMeter[i] = $(this).children(".main-meter").html(); // JUST REPLACE
alarmCount[i] = $(this).children(".alarm-count").html(); // THEM WITH
latitude[i] = $(this).children(".latitude").html(); // WHAT YOU'LL
longitude[i] = $(this).children(".longitude").html(); // NEED INSTEAD.
marker=new google.maps.Marker({
position:new google.maps.LatLng(
latitude[i], // (DEFINED ABOVE)
longitude[i] // (DEFINED ABOVE)
),
map:map, // THE DEFAULT
shadow:shadow, // JUST MY NAME FOR IT (DEFINED ABOVE)
icon:icon, // JUST MY NAME FOR IT (DEFINED ABOVE)
title:bldgName[i]+" \n"+bldgAddr[i], // FEEL FREE TO CHANGE THIS BASED ON WHAT YOU NEED
optimized:false // YOU MAY OR MAY NOT NEED THIS
});
marker.setAnimation(google.maps.Animation.NULL); // NULL, DROP, or BOUNCE (all-caps)
markersArray.push(marker);
google.maps.event.addListener(marker,'click',(function(marker,i){
return function(){
infowindow.setContent('
//
// INSERT INFOWINDOW CONTENT HERE
//
');infowindow.open(map,marker);
}
})(marker,i));
i++;
});
}
function updateMap(){
map.clearOverlays();
infowindow=new google.maps.InfoWindow();
var i=1;
$(".building").each(function(i){
bldgNo[i] = $(this).children(".bldg-no").html(); // YOU CAN GET
bldgName[i] = $(this).children(".bldg-name").html(); // RID OF ANY
bldgAddr[i] = $(this).children(".bldg-address").html(); // OF THESE...
bldgGfx[i] = $(this).children(".bldg-graphic").html(); //
mainMeter[i] = $(this).children(".main-meter").html(); // JUST REPLACE
alarmCount[i] = $(this).children(".alarm-count").html(); // THEM WITH
latitude[i] = $(this).children(".latitude").html(); // WHAT YOU'LL
longitude[i] = $(this).children(".longitude").html(); // NEED INSTEAD.
marker=new google.maps.Marker({
position:new google.maps.LatLng(
latitude[i], // (DEFINED ABOVE)
longitude[i] // (DEFINED ABOVE)
),
map:map, // THE DEFAULT
shadow:shadow, // JUST MY NAME FOR IT (DEFINED ABOVE)
icon:icon, // JUST MY NAME FOR IT (DEFINED ABOVE)
title:bldgName[i]+" \n"+bldgAddr[i], // FEEL FREE TO CHANGE THIS BASED ON WHAT YOU NEED
optimized:false // YOU MAY OR MAY NOT NEED THIS
});
marker.setAnimation(google.maps.Animation.NULL); // NULL, DROP, or BOUNCE (all-caps)
markersArray.push(marker);
google.maps.event.addListener(marker,'click',(function(marker,i){
return function(){
infowindow.setContent('
//
// INSERT UPDATED INFOWINDOW CONTENT HERE
//
');infowindow.open(map,marker);
}
})(marker,i));
i++;
});
}
そこからいくつかのねじれを解決する必要があると確信していますが、私のコンピューターにあるコード (あなたの利益のために編集されていないバージョン) は魅力的に機能します。使いやすくするためにコードをコピーして編集するときに誤ってコードを中断した場合は、お知らせください。回答を更新します。
乾杯！
編集:ところで、このコードは非表示の情報ウィンドウ (関数) を作成し、非表示の情報ウィンドウ (initMap関数) を更新しますupdateMap。updateMap設定した間隔で関数を呼び出すと、マップ内の情報が更新されます。これは私のプロジェクトに必要でした。
そのため、ページの InfoWindows が更新されるたびに、非表示のブロックを削除して新しいブロックを作成する必要があったため、非常に似ている/重複しているコード ブロックがあります。
で操作するためだけに作成されたupdateMap関数とアーティファクトを削除することで、必要に応じて非常に簡単に単純化できます。次に、関数を呼び出すだけで準備完了です!initMapupdateMapinitMap