11521 sujets

JavaScript, DOM et API Web HTML5

CARTE GOOGLE MAPS GEOLOCALISATION

Bonjour à tous,

Je suis a la recherche d une solution pour le code suivant
il s agit de récupérer la longitude et latitude d un marqueur déplaçable dans une variable gps_lat et gps_lng.

le seul souci je voudrais que la carte soit débord géolocaliser et que l on puisse affiner la position avec le marqueur

voici ma page :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>GEOLOCALISATION PEI</title>
</head>
<body>
<link href="../../connexionadmin.css" rel="stylesheet" type="text/css">
<style>
body,td,th {
	color:#000000;
}
body {
 background-color:#000000;

}
      #EmplacementDeMaCarte {
        height:700px;
        width:auto;
        
      }
      #positionMarker {
        height: 10%
      }
    </style>
    <center>
    <form action="geolocalisation2.php" method="post">
 <div id="EmplacementDeMaCarte"></div>
 </br> </br>
 <?php
session_start()
 ?>
 <font size="+2" color="red">
    <div class="row">

  	 <TEXTAREA class='input-field col-md-2' id='positionMarkerLatitude' name='gps_lat' required ></TEXTAREA>
     
     &nbsp;&nbsp;&nbsp;&nbsp;

     <TEXTAREA class='input-field col-md-2' id='positionMarkerLongitude' name='gps_lng' required ></TEXTAREA>
    </br>PEI NUMERO :&nbsp;<?php echo $_SESSION['num'];; ?></br>
    <script>
      function initialisation() {
        var optionsCarte = {
          zoom: 20,
          center: { lat: 43.7756, lng: 7.4950 },
          mapTypeId : google.maps.MapTypeId.HYBRID,
          streetViewControl: false
        };
        var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
        var optionsMarqueur = {
          map: maCarte,
          position: maCarte.getCenter(),
          draggable: true
        };
        var marqueur = new google.maps.Marker( optionsMarqueur );
        google.maps.event.addListener( marqueur, "position_changed", function() {
          var lat = this.getPosition().lat(),
            lng = this.getPosition().lng();
            document.getElementById('positionMarkerLatitude').innerHTML = lng.value = lat;
          	document.getElementById( "positionMarkerLongitude" ).innerHTML = lng;

        });

       }

    </script>
    <script async defer  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7xUUguzeibKL5IkhMIdHaqmhUOZx3Wkk&callback=initialisation"></script>
    
   <input type="submit" class="button" value="Géolocaliser" />
  </div>
     </center>
</body>
</html>


En vous remerciant par avance , passez une bonne fin de journée
Sujet clos
Aller à