Google Maps API複数のマーカーInfoWindowContentで同じデータが表示されています

-1

データを保存しましたが、別の名前が適切に保存されています。複数のマーカーも作成されていますが、InfoWindowでは各マーカーの最後の行のデータのみが表示されます。Google Maps API複数のマーカーInfoWindowContentで同じデータが表示されています

<?php 

    include 'connect.php'; 

    $locations=array(); 
    $apikey = "APIKEY"; 
    $query = $db->query('SELECT * FROM fields'); 
    while($row = $query->fetch_assoc()){ 

      $name = $row['field_name']; 
      $longitude = $row['field_longitude'];        
      $latitude = $row['field_latitude']; 
      $owner = $row['field_owner']; 
      $incharge = $row['field_incharge_name']; 
      $contact_number = $row['contact_number']; 
      $field_address = $row['field_address']; 
      $field_pitch_length = $row['field_pitch_length']; 
      $field_pitch_breadth = $row['field_pitch_breadth']; 
      $ground_busy_hours_per_week = $row['ground_busy_hours_per_week']; 
      $locations[]=array('field_name'=>$name,'lat'=>$latitude,'lng'=>$longitude, 'owner'=>$owner, 'incharge'=>$incharge, 'contact_number'=>$contact_number, 'field_address'=>$field_address, 'field_pitch_length'=>$field_pitch_length, 'field_pitch_breadth'=>$field_pitch_breadth, 'ground_busy_hours_per_week'=>$ground_busy_hours_per_week); 
     } 
     $markers = json_encode($locations); 

?> 
    <body> 
    <div id="map"></div> 

    <script> 
     <?php 
      echo "var markers=$markers;\n"; 
     ?> 
     function initMap() { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 10, 
       center: {lat: 15.3489395, lng: 73.7347356}, 
       mapTypeId: 'roadmap' 
      });        

      for(i = 0; i < markers.length; i++) { 
      var infoWindow = new google.maps.InfoWindow(), marker; 
       infoWindowContent = '<div class="info_content">' + 
       '<h4>Field Name: </h4><p>'+' '+markers[i].field_name+'</p><br>' + 
       '<h4>Owner: </h4><p>'+' '+markers[i].owner+'</p><br>' + 
       '<h4>Incharge: </h4><p>'+' '+markers[i].incharge+'</p><br>' + 
       '<h4>Contact No: </h4><p>'+' '+markers[i].contact_number+'</p><br>' + 
       '<h4>Field Address: </h4><p>'+' '+markers[i].field_address+'</p><br>' + 
       '<h4>Pitch Length: </h4><p>'+' '+markers[i].field_pitch_length+'</p><br>' + 
       '<h4>Pitch Breadth: </h4><p>'+' '+markers[i].$field_pitch_breadth+'</p><br>' + 
       '<h4>Busy Hours per Week: </h4><p>'+' '+markers[i].ground_busy_hours_per_week+'</p><br>' + 
       '</div>'; 
       lat = parseFloat(markers[i].lat); 
       lng = parseFloat(markers[i].lng); 
       var position = new google.maps.LatLng(lat, lng); 
       marker = new google.maps.Marker({ 
        position: position, 
        map: map 
       }); 


      google.maps.event.addListener(marker, 'click', (function(marker) { 
       return function() { 
        infoWindow.setContent(infoWindowContent); 
        infoWindow.open(map, marker); 
       } 
      })(marker)); 
      } 
      google.maps.event.addDomListener(window, 'load', initMap); 
     } 


    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"> 
    </script> 
    </body>

残念ながら、DBを共有できません。テストのために、ダミーデータを使用できます。私はなぜそれが最後の行からのデータを表示しているのか分かりません。

ありがとうございました。

出典

2017-02-22 simba777

"infoWindowContent"をクロージャに渡す必要があると思います。

google.maps.event.addListener(marker, 'click', (function(marker, infoWindowContent) { 
      return function() { 
       infoWindow.setContent(infoWindowContent); 
       infoWindow.open(map, marker); 
      } 
     })(marker, infoWindowContent));

出典

2017-02-22 18:58:55 Muthoos

はい、それでした。そんなにばかげて私は逃げ出した！ありがとう – simba777

Google Maps API複数のマーカーInfoWindowContentで同じデータが表示されています

答えて

関連する問題