after working on code while, styling infowindow , adding other bells, discovered infowiwndow not part of dom. first of all, new computer stuff , not sure if understand dom idea, though read quite few articles on that.
i have simplified (fiddle) version of code here.
in addition see fiddle, there infobubble, intead of infowindow, , modal window (or fancy window, people seem call different names). happy upload js files fiddle if knew it. local js files.
i trying accomplish 1 of 2 things:
a) make modal window work inside infobubble or second option,
b) have youtube video play whitout being interrupted settimeout. , once person clicks away form tube (or video finishes), infowindow rotation re-start.
i have been working (for several days) have modal , infobubble , google maps working together. dom issue of infowindow kind of non-land (for me @ least). there few questions here, didn't it. per google, "content contains either string of text or dom node display within info window when opened". please me that? how add infowindow dom? or how play video , in case, stop settimeout?
thank time , expertise. here 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 of info window, not text area. borderradius: 5, arrowsize: 20, borderwidth: 10, bordercolor: '#000', disableautopan: true, hideclosebutton: false, arrowposition: 50, // sets position of arrow - 50 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); }
Comments
Post a Comment