After working on my code for a while, styling infowindow and adding other bells, I discovered that the infowiwndow is not part of the DOM. First of all, I am new the computer stuff and I am not sure if I understand this DOM idea, even though I read quite a few articles on that.
I have a simplified (fiddle) version of my code HERE.
In addition to what you see is this fiddle, there is the infobubble, intead of the infowindow, and a modal window (or fancy window, people seem to call it different names). I would be happy to upload the js files to the fiddle if I knew it. Local js files.
I am trying to accomplish one of two things:
a) make the modal window to work inside the infoBubble or as second option,
b) just have the youtube video to play whitout being interrupted by the setTimeout. And once a person clicks away form you tube (or the video finishes), the infowindow rotation would re-start.
I have been working (for several days) just to have my modal and infobubble and google maps working together. But the DOM issue of the infowindow is kind of a non-land (for me at least). There are a few questions here, but I didn't get it. Per Google, "content contains either a string of text or DOM node to display within the info window when it is opened". Could someone please help me with that? How to add infowindow to DOM? Or how to play video and in this case, stop to settimeout?
Thank you very much for your time and expertise. Here is the actual code:
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);
}