google map infowindowをdiv外にgetElementeByIdで表示

Question

GoogleマップでこのJavaScriptの問題に悩まされました。私は地図の外のdivにマーカーの情報をgetElementById（またはあなたが提供する他の勧告）で表示したいと思います。

表示しない変数名に表示したい情報を保存しました。ここで

<script type="text/javascript"> 

var name; 
    var customIcons = { 
     restaurant: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
     }, 
     bar: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
     } 
    }; 

    function load() { 
     var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(48.1351, 11.5820), 
     zoom: 5, 
     mapTypeId: 'roadmap' 
     }); 
     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 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; 
      var icon = customIcons[type] || {}; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 

      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
     } 
     }); 
    } 

    function bindInfoWindow(marker, map, infoWindow, html, name, downloadUrl) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 

私はあなたのbindInfoWindow機能のためのトリック

 document.getElementById("mensaje").innerHTML = name; 
     }); 
    } 

    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() {} 


    </script> 


    <div id="map" style="width: 65%; height: 700px;float:left; display:inline;"></div> 
    <div id ="mensaje"> 
    <p id="mensaje"></p> 
    </div> 
    </body> 

Answer 1

に署名をしようとするところである：

function bindInfoWindow(marker, map, infoWindow, html, name, downloadUrl) 

あなたはそれを呼び出すと、あなたはこのようにそれを呼び出す：

bindInfoWindow(marker, map, infoWindow, html); 

so nameおよびdownloadUrlは、機能内にundefinedです。あなたはdownloadUrlを使用していないが、あなたは、あなたがそれを使用したい場合はnameに合格する必要があります。

bindInfoWindow(marker, map, infoWindow, html, name); 

proof of concept fiddle

また、FYIあなたは同じidでHTML内に複数の要素を持つことはできません、idユニークでなければなりません。これは無効です：

<div id ="mensaje"> 
<p id="mensaje"></p> 
</div> 

いずれかを削除するか、いずれかのIDを変更してください。

コードスニペット：

var name; 
 
var customIcons = { 
 
    restaurant: { 
 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
 
    }, 
 
    bar: { 
 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
 
    } 
 
}; 
 

 
function load() { 
 
    var map = new google.maps.Map(document.getElementById("map"), { 
 
    center: new google.maps.LatLng(48.1351, 11.5820), 
 
    zoom: 5, 
 
    mapTypeId: 'roadmap' 
 
    }); 
 
    var infoWindow = new google.maps.InfoWindow; 
 

 
    // Change this depending on the name of your PHP file 
 
    // downloadUrl("phpsqlajax_genxml.php", function(data) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var xml = parseXml(sampleXmlData); //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 type = markers[i].getAttribute("type"); 
 
    var point = new google.maps.LatLng(
 
     parseFloat(markers[i].getAttribute("lat")), 
 
     parseFloat(markers[i].getAttribute("lng"))); 
 
    bounds.extend(point); 
 
    var html = "<b>" + name + "</b> <br/>" + address; 
 
    var icon = customIcons[type] || {}; 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: point, 
 
     icon: icon.icon 
 
    }); 
 
    bindInfoWindow(marker, map, infoWindow, html, name); 
 
    } 
 
    map.fitBounds(bounds); 
 
    // }); 
 
} 
 

 
function bindInfoWindow(marker, map, infoWindow, html, name) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 

 
    document.getElementById("mensaje").innerHTML = name; 
 
    }); 
 
} 
 

 
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() {} 
 
google.maps.event.addDomListener(window, 'load', load); 
 

 
function parseXml(str) { 
 
    if (window.ActiveXObject) { 
 
    var doc = new ActiveXObject('MicrosoftXMLDOM'); 
 
    doc.loadXML(str); 
 
    return doc; 
 
    } else if (window.DOMParser) { 
 
    return (new DOMParser()).parseFromString(str, 'text/xml'); 
 
    } 
 
} 
 
var sampleXmlData = '<markers><marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/><marker name="Buddha Thai &amp; Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/><marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/><marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant"/><marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar"/><marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant"/><marker name="Mama&apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar"/><marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar"/><marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant"/></markers>';

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map" style="width: 65%;float:left; display:inline;"></div> 
 
<div id="mensaje"> 
 
    <!-- can't have two elements with same ID <p id="mensaje"></p> --> 
 
</div>