web-dev-qa-db-fra.com

Google Maps Géocodage d'une chaîne

im new to google maps api et ont réalisé l'exemple de géocodage à l'adresse:

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

Je souhaite pouvoir géocoder une chaîne dans mon code et placer un marqueur à l'emplacement plutôt que de rechercher un emplacement. 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas 
      {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
   //global variables 
var geocoder;
var map;
var Ireland = "Dublin";

function initialize() 
{
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(53.3496, -6.3263);
  var mapOptions = 
  {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  codeAddress();//call the function
}

function codeAddress() 
{
  var address = document.getElementById("Ireland").value;
  geocoder.geocode( {"Ireland":address}, function(results, status) 
  {
    if (status == google.maps.GeocoderStatus.OK) 
    {
      map.setCenter(results[0].geometry.location);//center the map over the result
      //place a marker at the 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);
   }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

C’est probablement quelque chose de simple, mais comme je l’ai dit, je suis un nouvel utilisateur de Google Maps et du HTML, et adorerions recevoir de l’aide du tout, alors n’hésitez pas à voter. 

javascriptgoogle-mapsgoogle-maps-api-3geocoding
5
user3232726

Cela modifiera la fonction codeAddress pour prendre un argument et géocoder cet argument. Si vous passez l'argument de la variable Ireland, il géocodera "Dublin".

var Ireland = "Dublin";

function initialize() 
{
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(53.3496, -6.3263);
  var mapOptions = 
  {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  codeAddress(Ireland);//call the function
}

function codeAddress(address) 
{
  geocoder.geocode( {address:address}, function(results, status) 
  {
    if (status == google.maps.GeocoderStatus.OK) 
    {
      map.setCenter(results[0].geometry.location);//center the map over the result
      //place a marker at the 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);
   }
  });
}
11
geocodezip

Essayez juste avec ça.

 <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Google Map Address</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

            var geocoder = new google.maps.Geocoder();
    var address = "Dublin";

    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();


        initialize(latitude,longitude);

                } 

        }); 


    function initialize(latitude,longitude) {
        var latlng = new google.maps.LatLng(latitude,longitude);

        var myOptions = {
          zoom: 14,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

        var marker = new google.maps.Marker({
          position: latlng, 
          map: map, 
            title:"location : Dublin"
        }); 
      }


</script>

    </head>
    <body>

    <h2>Google Map Address</h2>

    <div id="map_canvas" style="width:710px; height:300px"></div>   

            </body>
    </html>
1
Jenson M John