0

ajax呼び出しを使用して、Mysqlデータベースのマーカーが設定されたマップ上の2つのタブでInfobubblesを機能させようとしています。

問題は、最後に追加されたマーカーから、すべてのインフォバブルがタブに同じコンテンツを表示していることです。これがjsスクリプト全体です。どんな助けも大歓迎です。

      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 this depending on the name of your PHP file 
  downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < 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: The Geolocation service failed.'; 
    } else { 
      var content = 'Error: Your 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 to the 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);
4

2 に答える 2

1

マーカーに応じてコンテンツを設定するコードはコメントアウトされています。

//infoBubble.setContent(html);

そのため、最後に作成された情報ウィンドウの内容が常に表示されます。

タブの内容を含む実際の例

于 2013-04-05T13:03:39.180 に答える