google maps api 3 - Infobubble only displaying content from last marker added via PHP/Mysql with tabs -


i've been trying infobubbles work 2 tabs on map populated markers mysql database ajax call.

the problem every infobubble displaying same content in tabs, last marker added. here entire js script, appreciated.

      var script = '<script type="text/javascript" src="http://google-maps-' +       'utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble';   script += '.js"><' + '/script>';   document.write(script);  var customicons = {    free: {      icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',      animation: google.maps.animation.drop,     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'    },    paid: {      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',      animation: google.maps.animation.drop,     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'    }  };   // end custom icons    var map, infobubble;   function initialize() {      var myoptions = {        zoom: 13,        maptypeid: google.maps.maptypeid.roadmap      };      map = new google.maps.map(document.getelementbyid('map'),          myoptions);       // try html5 geolocation      if(navigator.geolocation) {        navigator.geolocation.getcurrentposition(function(position)          {          var pos = new google.maps.latlng(position.coords.latitude,position.coords.longitude);           var marker = new google.maps.marker({            map: map,            position: pos,                        icon:'images/markers/you.png',                        animation: google.maps.animation.drop,            title: 'your location.'          });       infobubble = new infobubble({       maxwidth: 300,       borderradius: 10,       borderwidth: 1,       bordercolor: '#2c2c2c',       shadowstyle: 1     });     var infowindow = new google.maps.infowindow;     // change depending on name of php file    downloadurl("phpsqlajax_genxml.php", function(data) {     var xml = data.responsexml;      var markers = xml.documentelement.getelementsbytagname("marker");      (var = 0; < markers.length; i++)      {          var name = markers[i].getattribute("name");          var address = markers[i].getattribute("address");          var citystate = markers[i].getattribute("citystate");          var phone = markers[i].getattribute("phone");          var type = markers[i].getattribute("type");           var point = new google.maps.latlng(            parsefloat(markers[i].getattribute("lat")),            parsefloat(markers[i].getattribute("lng")));          var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + citystate + "<br/>" + phone;  //html inside infowindow          var description = "<b>" + name + "</b> <br/>" + address + "<br/>" + citystate + "<br/>" + phone;  //html inside infowindow         var icon = customicons[type] || {};          var marker = new google.maps.marker({              map: map,              position: point,              icon: icon.icon,              shadow: icon.shadow,             animation: google.maps.animation.drop         });          bindinfowindow(marker, map, infobubble, html, description);      }      infobubble.addtab('tab 1', html);     infobubble.addtab('tab 2', description);    });            map.setcenter(pos);        }, function() {          handlenogeolocation(true);        });      } else {        // browser doesn't support geolocation        handlenogeolocation(false);      }    }      function handlenogeolocation(errorflag) {      if (errorflag) {        var content = 'error: geolocation service failed.';      } else {        var content = 'error: browser doesn\'t support geolocation.';      }       var options = {        map: map,        position: new google.maps.latlng(60, 105),        content: content      };       var infobubble = new google.maps.infobubble(options);      map.setcenter(options.position);    }   // additional functions related db listing function   function bindinfowindow(marker, map, infobubble, html) {    google.maps.event.addlistener(marker, 'click', function() {      //infobubble.setcontent(html);      infobubble.open(map, marker);   });  }   function downloadurl(url, callback) {    var request = window.activexobject ?        new activexobject('microsoft.xmlhttp') :        new xmlhttprequest;     request.onreadystatechange = function() {      if (request.readystate == 4) {        request.onreadystatechange = donothing;        callback(request, request.status);      }    };     request.open('get', url, true);    request.send(null);  }   function donothing() {}     function addtab() {     var title = document.getelementbyid('tab-title').value;     var content = document.getelementbyid('tab-content').value;      if (title != '' && content != '') {       infobubble.addtab(title, content);     }   }   google.maps.event.adddomlistener(window, 'load', initialize);

the code sets content depending on marker commented out:

//infobubble.setcontent(html);

therefor content of last infowindow created displayed.

working example, including tab content


Comments

Post a Comment

Popular posts from this blog

monitor web browser programmatically in Android? -

i've got tricky question here. need users make payment bank (namely barclaycard) in uk. so, have https url , add parameters (such amount pay, order reference, etc) url, start http connection intent.actionview, redirect user browser can enter credit card details on bank's webpage , make payment our account successfully. far ? the code use below (i changed values privacy reasons) problem is, need app when user has completed/failed/cancelled payment. barclaycardautomatically redirects particular url when payment has succeeded, 1 if failed. there no way of knowing when barclaycard payment has succeeded go android app somehow ? button cardbutton = (button) findviewbyid(r.id.card_button); cardbutton.setonclicklistener(new view.onclicklistener() { @override public void onclick(view arg0) { string prehashstring = new string(); string prohashstring = new string(); string shapassphrase = new string(); shapassphrase = "gsvth£h70zkh...
Read more

Shrink a YouTube video to responsive width -

i have youtube video embedded on our website , when shrink screen tablet or phone sizes stops shrinking @ around 560px in width. standard youtube videos or there can add code make go smaller? you can make youtube videos responsive css. wrap iframe in div class of "videowrapper" , apply following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } the .videowrapper div should inside responsive element. padding on .videowrapper necessary keep video collapsing. may have tweak numbers depending upon layout.
Read more

wpf - PdfWriter.GetInstance throws System.NullReferenceException -

i'm trying create pdf document using itextsharp 5.3.4 using following document document = new document(); filestream stm = new filestream(filename, filemode.create); pdfwriter writer = pdfwriter.getinstance(document, stm); i'm getting system.nullreferenceexception following stack trace: system.nullreferenceexception occurred hresult=-2147467261 message=la référence d'objet n'est pas définie à une instance d'un objet. source=itextsharp stacktrace: à itextsharp.text.version.getinstance() innerexception: i've verified neither document nor stm null, , if select "continue" in vs12 document created - exception thrown. updated itextsharp 5.4.0 , it's still occurring. can't find information on anywhere - got ideas? make sure not catching exceptions. nullreferenceexception can 1 caught , handled inside itextsharp, don't care it. fact can continue supports theory. change following setting verify: debug -> exceptions ...
Read more