しばらくコードを作成し、infowindow のスタイルを設定し、他のベルを追加した後、infowindow が DOM の一部ではないことに気付きました。まず第一に、私はコンピューターのことは初めてで、この DOM のアイデアを理解しているかどうか確信が持てません。これに関する記事をかなり読んでいます。
コードの簡略化された (フィドル) バージョンがHEREにあります。
このフィドルに加えて、infowindow の代わりに infobubble とモーダル ウィンドウ (または派手なウィンドウ、人々はそれを別の名前で呼んでいるようです) があります。ご存知でしたら、jsファイルをフィドルにアップロードしていただければ幸いです。ローカル js ファイル。
私は2つのことのいずれかを達成しようとしています:
a) モーダル ウィンドウを infoBubble 内で、または 2 番目のオプションとして機能するようにします。
b）setTimeoutによって中断されることなく、YouTubeビデオを再生するだけです。そして、ユーザーがユーチューブからクリックを外すと (またはビデオが終了すると)、情報ウィンドウのローテーションが再開されます。
私は、モーダルとインフォバブルとGoogleマップを連携させるためだけに（数日間）取り組んできました。しかし、infowindow の DOM の問題は、一種の非土地です (少なくとも私にとっては)。ここでいくつか質問がありますが、わかりませんでした。Googleによると、「コンテンツには、開いたときに情報ウィンドウ内に表示するテキスト文字列または DOM ノードが含まれています」。誰かがそれを手伝ってくれませんか？DOM に情報ウィンドウを追加するには? または、ビデオを再生する方法と、この場合、settimeout まで停止する方法は?
あなたの時間と専門知識をありがとうございました。実際のコードは次のとおりです。
var BERLIN = new google.maps.LatLng(-12.517683, -46.394393);
var map = null;
var marker;
var index = 0;
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [ //personal options
]; // end of personal options
var mapOptions = { // begining map options
zoom: 2,
center: BERLIN,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID,
draggable: false,
zoomControl: false,
panControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.right_TOP
},
} // end of map options
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
function dropMarker (map, pos, box){
var box = infobubbles[index];
var infoBubble;
return new google.maps.Marker({
map: map,
position: pos,
draggable: false,
//link:url,
});
}
var infoBubble;
function changeMarker() {
if (marker) {
infoBubble.close();
marker.setMap(null);
}
var pos = neighborhood[index];
var box = infobubbles[index];
setTimeout(function () {
infoBubble.open(map, marker);
}, 200);
index = (index+1) % neighborhood.length;
setTimeout(function () {
changeMarker();
}, 7000);
marker = dropMarker(map,pos,box);
contentString =('<div id="content">'+
'lat:' + box.lat + ' ' +
'lng:' + box.lng + '<br />' +
'name:' + box.name+ '<br />' +
'<a href=http://'+ box.link+box.link+'</a>' + '<br />' )
infoBubble = new InfoBubble({
maxHeight:200,
maxWidth:400,
// position: new google.maps.LatLng(),
map: map,
content: contentString,
shadowStyle: 1,
padding: 2,
backgroundColor: 'rgb(55,55,55)', // set the back of ALL info window, not only the text area.
borderRadius: 5,
arrowSize: 20,
borderWidth: 10,
borderColor: '#000',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 50, // sets position of arrow - 50 is the middle.
backgroundClassName: 'phoney',
arrowStyle: 0,
});
infoBubble.open(map, marker);
}
$.ajax({
type : 'POST',
url : 'php/locationsJson.php',
dataType : 'json',
success: function( json ){
neighborhood=[];
infobubbles=[];
$.each(json,function(i,item){
neighborhood.push(new google.maps.LatLng(this.lat,this.lng));
contentString = ({link:this.link,name:this.name,lat:this.lat,lng:this.lng,link:this.link})
infoBubble = new InfoBubble (contentString)
infobubbles.push(infoBubble)
}); //$.each
changeMarker();
} // end of success
});//end of ajax
} //end of initialized
google.maps.event.addDomListener(window, 'load', initialize);
function updateStyles() {
var shadowStyle = document.getElementById('shadowstyle').value;
infoBubble.setShadowStyle(shadowStyle);
var padding = document.getElementById('padding').value;
infoBubble.setPadding(padding);
var borderRadius = document.getElementById('borderRadius').value;
infoBubble.setBorderRadius(borderRadius);
var borderWidth = document.getElementById('borderWidth').value;
infoBubble.setBorderWidth(borderWidth);
var borderColor = document.getElementById('borderColor').value;
infoBubble.setBorderColor(borderColor);
var backgroundColor = document.getElementById('backgroundColor').value;
infoBubble.setBackgroundColor(backgroundColor);
var maxWidth = document.getElementById('maxWidth').value;
infoBubble.setMaxWidth(maxWidth);
var maxHeight = document.getElementById('maxHeight').value;
infoBubble.setMaxHeight(maxHeight);
var minWidth = document.getElementById('minWidth').value;
infoBubble.setMinWidth(minWidth);
var minHeight = document.getElementById('minHeight').value;
infoBubble.setMinHeight(minHeight);
var arrowSize = document.getElementById('arrowSize').value;
infoBubble.setArrowSize(arrowSize);
var arrowPosition = document.getElementById('arrowPosition').value;
infoBubble.setArrowPosition(arrowPosition);
var arrowStyle = document.getElementById('arrowStyle').value;
infoBubble.setArrowStyle(arrowStyle);
}