afficher google carte infowindow dans un div à l'extérieur avec getElementeById

Question

Je me suis retrouvé coincé dans ce problème JavaScript avec google map. Je veux afficher les informations du marqueur dans un div en dehors de la carte avec getElementById (ou toute autre recommandation que vous fournissez).

J'ai stocké l'information que je veux afficher dans le nom de la variable qu'elle n'affiche pas.

<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); 

Voici où je tente de faire l'affaire

 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

La signature de votre fonction bindInfoWindow est:

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

Lorsque vous appelez, vous l'appelez comme ceci:

bindInfoWindow(marker, map, infoWindow, html); 

Donc name et downloadUrl sont undefined à l'intérieur de la fonction. Vous n'utilisez pas downloadUrl mais vous devez passer name si vous voulez l'utiliser:

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

proof of concept fiddle

En outre, FYI vous ne pouvez pas avoir plusieurs éléments en HTML avec le même id, id doit être unique. Ceci n'est pas valide:

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

Supprimez l'un d'entre eux ou modifiez l'un des ID.

extrait de code.

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>