marqueurs mysql ne figurant pas sur la carte

Question

bonne nuit, im essayant d'afficher des marqueurs sur une carte avec JSON mais je ne suis pas capable de et je ne sais pas pourquoi, je peux voir la carte et peut se déplacer mais pas même un marqueur est affiché,

<?php 
require("config.php"); 
/* lat/lng data will be added to this array */ 
$locations=array(); 
$query = $db->query('SELECT * FROM inmuebles'); 
    while($row = $query->fetch()){ 

     $longitude = $row['long'];        
     $latitude = $row['lat']; 

     /* Each row is added as a new array */ 
     $locations[]=array('lat'=>$latitude, 'long'=>$longitude); 
    } 
    /* Convert data to json */ 
    $markers = json_encode($locations); 

    echo $markers; 
    ?> 
<script type='text/javascript'> 
<?php 
    echo "var markers=$markers;\n"; 

?> 
var map; 
    var markersArray = []; 

function initMap() { 

    var latlng = new google.maps.LatLng(-16.5338955,-68.0656364); 
    var myOptions = { 
     zoom: 13, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    var infowindow = new google.maps.InfoWindow(), marker, lat, long; 
    var json=JSON.parse(markers); 

    for(var o in json){ 

     lat = json[ o ].lat; 
     long=json[ o ].long; 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat,long), 
      map: map 
     }); 
     google.maps.event.addListener(marker, 'click', function(e){ 
      infowindow.setContent(this.name); 
      infowindow.open(map, this); 
     }.bind(marker)); 
    } 
} 
</script> 

la sortie de marqueurs $ est

[{"lat":"-16.52629052070058","long":"-68.0797004699707"},{"lat":"-16.500122130208325","long":"-68.12089920043945"},{"lat":"-16.54307592346882","long":"-68.06425094604492"}] 

merci à l'avance que j'ai essayé vraiment difficile de voir où l'erreur est

EDIT

<?php 
$con = mysqli_connect('localhost','waru','olairhead154','inmueble'); 
?> 
<?php 
require("config.php"); 
/* lat/lng data will be added to this array */ 
$locations=array(); 
$query = $db->query('SELECT * FROM inmuebles'); 
    while($row = $query->fetch()){ 

     $longitude = $row['long'];        
     $latitude = $row['lat']; 

     /* Each row is added as a new array */ 
     $locations[]=array('lat'=>$latitude, 'long'=>$longitude); 
    } 
    /* Convert data to json */ 
    $markers = json_encode($locations); 


    echo $markers; 
?> 
<script type='text/javascript'> 
<?php 
    echo "var markers=$markers;\n"; 

?> 
var map; 
    var markersArray = []; 

function initMap() { 

    var latlng = new google.maps.LatLng(-16.5338955,-68.0656364); 
    var myOptions = { 
     zoom: 13, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 
    var markers = '<?= json_encode($markers) ?>'; 
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    var infowindow = new google.maps.InfoWindow(), marker, lat, long; 
    var json=markers; 
    for(var o in json){ 

     lat = json[ o ].lat; 
     long=json[ o ].long; 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat,long), 
      map: map 
     }); 
     google.maps.event.addListener(marker, 'click', function(e){ 
      infowindow.setContent(this.name); 
      infowindow.open(map, this); 
     }.bind(marker)); 
    } 
} 
google.maps.event.addDomListener(window, "load", initMap); 
</script> 

ce sont les changements que je faisais, mais encore aucun marqueur montré im vraiment nouveau à ce s'il vous plaît soyez patient avec moi

grâce

Answer 1

Il est préférable si vous echo seulement votre $ marqueurs dans var marqueurs avec la fonction json_encode(). Après cela, vous pouvez simplement créer une nouvelle variable js var markersJson et la valeur est JSON.parse (marqueurs) (vous devez l'analyser comme JSON, sinon il vous donnera une erreur). De là, vous pouvez simplement itérer à travers le tableau en utilisant javascript .map() fonction (fonction d'ordre supérieur) et l'afficher en tant que marqueur Google Maps. Pour plus d'informations concernant Google Maps Marker, veuillez vérifier le lien this.

échantillon coordonnées de la table inmuebles:

<?php 
    $markers = array( 
     array('lat' => -16.52629052070058, 'lng' => -68.0797004699707), 
     array('lat' => -16.500122130208325, 'lng' => -68.12089920043945), 
     array('lat' => -16.54307592346882, 'lng' => -68.06425094604492) 
    ); 
?> 

marqueurs Echo $ avec json_encode() pour marqueurs var:

var markers = '<?= json_encode($markers) ?>'; 

marqueurs syntaxiques que json:

var markersJson = JSON.parse(markers); 

parcourir la tableau et afficher les coordonnées comme Google Maps Markers

var plotMarkers = markersJson.map(function(value, index){ 
var marker = new google.maps.Marker({ 
    position : new google.maps.LatLng(value.lat, value.lng), 
    map: map, 
    title : 'Hello' 
}); 
return marker; 
}); 

code complet ici:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Google Maps - PHP Markers Implementation</title> 
     <style type="text/css"> 
      html,body { 
       height:100%; 
      } 
      body { 
       width:100%; 
      } 
      #map_canvas { 
       width:100%; 
       height:100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="map_canvas"></div> 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 
     <script type="text/javascript"> 
      <?php 
       $markers = array( 
        array('lat' => -16.52629052070058, 'lng' => -68.0797004699707), 
        array('lat' => -16.500122130208325, 'lng' => -68.12089920043945), 
        array('lat' => -16.54307592346882, 'lng' => -68.06425094604492) 
       ); 
      ?> 
      function initMap() { 
       var markers = '<?= json_encode($markers) ?>'; 
       var markersJson = JSON.parse(markers); 
       var latlng = new google.maps.LatLng(-16.5338955,-68.0656364); 
       var myOptions = { 
        zoom: 13, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
       }; 
       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
       var plotMarkers = markersJson.map(function(value, index){ 
        var marker = new google.maps.Marker({ 
         position : new google.maps.LatLng(value.lat, value.lng), 
         map: map, 
         title : 'Hello' 
        }); 
        return marker; 
       }); 
      } 
     </script> 
    </body> 
</html>