Google Maps Infowindow ne montre pas

Question

J'ai des cartes google dans mon application. Tout fonctionne comme il se doit, sauf pour un problème. Mes épingles se présentent comme une bulle (nom de technicien), qui fonctionne. Mais si je clique sur ce technicien (pin) il devrait ouvrir un infowindow qui affiche plus d'informations concernant le technicien par exemple le nombre d'appels, la distance au client, ect ... (les données sont tirées à travers), le seul problème que je Je suis confronté à ce que la fenêtre d'information ne s'affiche pas du tout lorsque je clique sur la broche/technicien ... J'ai parcouru le code mais je n'arrive pas à trouver où je me suis trompé ...

Ceci est mon code javascript:

<script type="text/javascript"> 

    $(document).ready(function() { 

     var marker = $("#<%= txtTechnicians.ClientID %>").val(); 
     var markers = JSON.parse(marker); 

     var markerCustomer = $("#<%= txtCustomer.ClientID %>").val(); 
     var markerCust = JSON.parse(markerCustomer); 

     function initialize() { 

      var map = new google.maps.Map(document.getElementById("dvMap"), { 
       center: new google.maps.LatLng(markerCust[0].lat, markerCust[0].lng), 
       zoom: 10, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       mapTypeControl: true, 
       mapTypeControlOptions: 
        { 
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
         poistion: google.maps.ControlPosition.TOP_RIGHT, 
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 
         google.maps.MapTypeId.TERRAIN, 
         google.maps.MapTypeId.HYBRID, 
         google.maps.MapTypeId.SATELLITE] 
        }, 
       streetViewControl: true, 
       navigationControl: true, 
       navigationControlOptions: 
       { 
        style: google.maps.NavigationControlStyle.ZOOM_PAN 
       }, 
       scaleControl: true, 
       draggableCursor: 'move' 
      }); 

      var trafficLayer = new google.maps.TrafficLayer(); 
      trafficLayer.setMap(map); 

      var poly = new google.maps.Polyline({ map: map, strokeColor: '#FF8200' }); 
      poly.setMap(map); 

      var lat_lngCust = new Array(); 
      for (i = 0; i < markerCust.length; i++) { 
       var data = markerCust[i] 
       var myLatlngCust = new google.maps.LatLng(data.lat, data.lng); lat_lngCust.push(myLatlngCust); 
       var markerCustomer = new StyledMarker({ 
        styleIcon: new StyledIcon(StyledIconTypes.BUBBLE, { color: "#D20202", text: data.title }), 
        position: myLatlngCust, map: map, title: data.title 
       }); 

       (function (markerCustomer, data) { 
        google.maps.event.addListener(markerCustomer, "click", function (e) { 
         infoWindow.setContent(data.description); 
         infoWindow.open(map, markerCustomer); 
        }); 
       })(markerCustomer, data); 
      } 

      var lat_lng = new Array(); 
      for (i = 0; i < markers.length; i++) { 
       var data = markers[i] 
       var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng); 
       var marker = new StyledMarker({ 
       styleIcon: new StyledIcon(StyledIconTypes.BUBBLE, { color: data.colourcode, text: data.title }), 
        position: myLatlng, map: map, title: data.title 
       }); 

       (function (marker, data) { 
        google.maps.event.addListener(marker, "click", function (e) { 
         infoWindow.setContent(data.description); 
         infoWindow.open(map, marker); 
        }); 
       })(marker, data); 
      } 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    }); 
</script> 

Answer 1

sur la base de votre code ci-joint, infoWindow est définie nulle part.

Je pense qu'il vous manque juste cette ligne; var infoWindow = new google.maps.InfoWindow();

Voir ci-dessous:

(function (marker, data) { 
    google.maps.event.addListener(marker, "click", function (e) { 
     infoWindow.setContent(data.description); // @SEE: infoWindow is used but not initialized or declare anywhere within the scope. 
     infoWindow.open(map, marker); // same 
    }); 
})(marker, data);