web-dev-qa-db-fra.com

Utilisation de l'adresse plutôt que de la longitude et de la latitude avec l'API Google Maps

J'ai entendu dire qu'il est possible de soumettre une adresse à la place de la longitude et de la latitude, ce qui serait beaucoup plus pratique pour mon système. L'utilisateur doit entrer son adresse lors de la création de son profil, lequel affichera ensuite une carte Google Maps de sa maison. Actuellement, l'API Google Maps fonctionne parfaitement avec Longitude et Latitude:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css" />
    <title>Login Page</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
  center: new google.maps.LatLng(52.640143,1.28685),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.640143,1.28685),
    map: map,
    title: "Mark On Map"
});
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>

Quelqu'un peut-il m'aider à modifier mon code pour permettre à l'API Google Maps de demander une adresse à sa place, car je souhaite lire l'adresse de l'utilisateur directement à partir de la base de données MySQL.

javascriptgoogle-mapsgoogle-maps-api-3latitude-longitudestreet-address
51
edwoollard

Voir cet exemple initialise la carte avec "San Diego, CA".

Utilise l'API Javascript Google Maps v3 Geocoder pour traduire l'adresse en coordonnées pouvant être affichées sur la carte.

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var address ="San Diego, CA";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(150,50)
                });

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
 <div id="map_canvas" style="width:100%; height:100%">
</body>
</html>

extrait de code de travail:

var geocoder;
var map;
var address = "San Diego, CA";

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  if (geocoder) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

          var infowindow = new google.maps.InfoWindow({
            content: '<b>' + address + '</b>',
            size: new google.maps.Size(150, 50)
          });

          var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: address
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });

        } else {
          alert("No results found");
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" ></div>
82
geocodezip
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: latlng
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == 'OK') {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
    });
  } else {
    alert('Geocode was not successful for the following reason: ' + status);
  }
});
}

<body onload="initialize()">
 <div id="map" style="width: 320px; height: 480px;"></div>
 <div>
   <input id="address" type="textbox" value="Sydney, NSW">
   <input type="button" value="Encode" onclick="codeAddress()">
 </div>
</body>

Ou consultez la documentation https://developers.google.com/maps/documentation/javascript/geocoding

2
Thilina

Vous pouvez analyser la géolocalisation à travers les adresses. Créez un tableau avec jquery comme ceci:

var addressesArray = [
'Address Str.No, Postal Area/city',
//follow this structure
] 
  //loop all the addresses and call a marker for each one
  for (var x = 0; x < addressesArray.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addressesArray[x]+'&sensor=false', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        var aMarker= new google.maps.Marker({
            position: latlng, //it will place marker based on the addresses, which they will be translated as geolocations. 
            map: map 

        });

}

Notez également que Google limite vos résultats si vous ne possédez pas de compte professionnel, et vous obtenez une erreur si vous utilisez trop d'adresses.

2
Sidius

Le géocodage est le processus de conversion d'adresses (comme "1600 Amphitheatre Parkway, Mountain View, CA") en coordonnées géographiques (telles que la latitude 37,423021 et la longitude -122.083739). , que vous pouvez utiliser pour placer des marqueurs ou positionner la carte.

Serait-ce ce que vous recherchez: contient un exemple de code
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests

2
Pavan K Mutt