Passer des variables PHP à l'API Google Maps

Lorsqu'un utilisateur s'inscrit à ma demande (projet collégial), on leur demande leur adresse. Je convertis cette adresse en latitude et en longitude, puis je la stocke dans ma base de données.

J'accède à la latitude et à la longitude de la façon suivante:

<?php require '../connect.php'; session_start(); $_SESSION['username']; $sql = "SELECT latitude, longitude FROM userinformation WHERE username = '". $_SESSION['username']. "'"; $result = $db->query($sql); if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ $lat = $row["latitude"]; $lng = $row["longitude"]; echo $lat; echo $lng; } } ?>

J'essaie ensuite de passer la variable $ lat et $ lng dans le script de l'API Maps de la manière suivante:

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: {lat: '<?php echo $lat;?>', lng: '<?php echo $lng;?>'} }); marker = new google.maps.Marker({ map: map, draggable: true, animation: google.maps.Animation.DROP, position: {lat: '<?php echo $lat;?>', lng: '<?php echo $lng;?>'} }); marker.addListener('click', toggleBounce); }

Cela me donne la page suivante:

Page PHP

J'ai également essayé de convertir les variables PHP en JS:

 var js_variable = '<?php echo $lat;?>'; document.write(js_variable); var js_variable1 = '<?php echo $lng;?>'; document.write(js_variable1);

Je passe ensuite les variables JS au lieu des variables PHP, mais la sortie est toujours la même. Quelle serait la manière correcte de passer une variable comme lat / lng au lieu d'une valeur codée en dur:

 center: {lat: 59.325, lng: 18.070} position: {lat: 59.327, lng: 18.067}

Lorsque je remplace les valeurs dans le violon avec les chaînes {lat: '30.365273', lng: '-81.699600'} , j'ai une erreur javascript signalée par l'API: Assertion failed: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number .

Si j'utilise parseFloat sur ces chaînes, cela fonctionne:

extrait de code:

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: { lat: parseFloat('30.365273'), lng: parseFloat('-81.699600') } }); marker = new google.maps.Marker({ map: map, draggable: true, animation: google.maps.Animation.DROP, position: { lat: parseFloat('30.365273'), lng: parseFloat('-81.699600') } }); marker.addListener('click', toggleBounce); } google.maps.event.addDomListener(window, "load", initMap);

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

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>

Je pense que le PHP fait écho de la valeur directement dans votre JavaScript est probablement le problème. Essayez de passer lat et lng en tant que paramètres à votre carte de fonction à la place.

 function initMap(myLat, myLng) { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: new google.maps.LatLng(myLat, myLong) }); marker = new google.maps.Marker({ map: map, draggable: true, animation: google.maps.Animation.DROP, position: new google.maps.LatLng(myLat, myLong) }); marker.addListener('click', toggleBounce); }

Modifier: essayez d'utiliser la fonction Google Maps pour définir la latitude et la longitude, comme ci-dessus.