2012-11-20 17 views
40

マップを表示せずにautocomplete api googleマップから緯度と経度を取得しようとしています。スクリプトではオートコンプリートはうまくいきますが、私は緯度と経度を取得できません。Google map api get地図なしのオートコンプリートからの緯度と経度

<script type="text/javascript"> 
    function initialize() { 

var options = { 
    types: ['(cities)'] 
}; 

var input = document.getElementById('searchTextField'); 
var autocomplete = new google.maps.places.Autocomplete(input, options); 
} 
    google.maps.event.addDomListener(window, 'load', initialize); 

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

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(); 
    alert(latitude); 
    } 
}); 

</script> 

答えて

0

GoogleプレイスAPIには、プレイスオートコンプリートを含むREST APIも用意されています。 https://developers.google.com/places/documentation/autocomplete

ただし、サービスから取得するデータは、マップ用に使用する必要があります。

+3

今のようには思われません。 Googleマップのドキュメントでは、「地図を表示しなくてもプレイスオートコンプリートを使用できます。地図を表示する場合は、Googleマップでなければなりません。地図なしでプレイスオートコンプリートサービスから予測を表示するときは、 Googleのロゴによって。 これはAPIのドキュメントから取得したものです。https://developers.google.com/places/documentation/autocomplete –

100

以下のコードを使用することができます。

<script src="http://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script> 

<script type="text/javascript"> 
    function initialize() { 
     var input = document.getElementById('searchTextField'); 
     var autocomplete = new google.maps.places.Autocomplete(input); 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      var place = autocomplete.getPlace(); 
      document.getElementById('city2').value = place.name; 
      document.getElementById('cityLat').value = place.geometry.location.lat(); 
      document.getElementById('cityLng').value = place.geometry.location.lng(); 
      //alert("This function is working!"); 
      //alert(place.name); 
      // alert(place.address_components[0].long_name); 

     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

...この部分は、フォーム内にある:

<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> 
<input type="hidden" id="city2" name="city2" /> 
<input type="hidden" id="cityLat" name="cityLat" /> 
<input type="hidden" id="cityLng" name="cityLng" /> 

私はそれが役に立てば幸い。

4

オートコンプリートAPIからGoogleが生成したデータには緯度と経度のフィールドが含まれていないため、緯度/経度は取得できません。 例: -

{ 
    "predictions" : [ 
     { 
     "description" : "IIT Mumbai, Mumbai, Maharashtra, India", 
     "id" : "ac3235cda973818a89b5fe21ad0f5261ac9b6723", 
     "matched_substrings" : [ 
      { 
       "length" : 10, 
       "offset" : 0 
      } 
     ], 
     "reference" : "CkQ0AAAAHWg-RSngiYHHdz_yqyFKmfSoBwT-_PW0k8qQDhsbiVrk7BlPHCyJb58OthledMUTGYS5Vhec1Zj2L7w9Rq0zDxIQrbn05RX1QgWHkSXsmTk1TRoU45APW2BBRIUsA3t6XBy_8s0BPPA", 
     "terms" : [ 
      { 
       "offset" : 0, 
       "value" : "IIT Mumbai" 
      }, 
      { 
       "offset" : 12, 
       "value" : "Mumbai" 
      }, 
      { 
       "offset" : 20, 
       "value" : "Maharashtra" 
      }, 
      { 
       "offset" : 33, 
       "value" : "India" 
      } 
     ], 
     "types" : [ "establishment", "geocode" ] 
     } 
    ], 
    "status" : "OK" 
} 

あなたの住所から経度と緯度を取得するには、GoogleのAPIを使用することができます。すでに述べたように、結果を挿入する隠しフィールドを実装する必要があります。座標と一緒に位置を保存することができます。

例えばhttps://maps.googleapis.com/maps/api/geocode/json?address=IIT%20Area,%20Mumbai,%20Maharashtra,%20India&sensor=false私は最近、私のプロジェクトの一つで、この機能を実装し

function getLatLngFromAddress(city, country){ 

    var address = city +", "+ country; 
    var geocoder = new google.maps.Geocoder(); 

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

    if (status == google.maps.GeocoderStatus.OK) { 
     $('#latitude').val(results[0].geometry.location.Pa); 
     $('#longitude').val(results[0].geometry.location.Qa); 

    } else { 
     console.log("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
} 
+1

https://developers.google.com/places/documentation/detailsのplace_idにプレイス詳細を使用するだけです – CallMeLaNN

+1

place.geometry.location.lat() – 4ndro1d

0

あなたは追加のAPIまたはURL呼び出しせずに、同じAPIから取得することができます。

HTML

<input class="wd100" id="fromInput" type="text" name="grFrom" placeholder="From" required/> 

Javascriptを

var input = document.getElementById('fromInput'); 
var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759), 
    new google.maps.LatLng(-33.8474, 1512631) 
) 

var options = { 
bounds: defaultBounds 
} 

var autocomplete = new google.maps.places.Autocomplete(input, options); 
var searchBox = new google.maps.places.SearchBox(input, { 
     bounds: defaultBounds 
}); 


google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 


console.log(places[0].geometry.location.G); // Get Latitude 
console.log(places[0].geometry.location.K); // Get Longitude 

//Additional information 
console.log(places[0].formatted_address); // Formated Address of Place 
console.log(places[0].name); // Name of Place 






    if (places.length == 0) { 
     return; 
    } 

    var bounds = new google.maps.LatLngBounds(); 
    console.log(bounds); 
    }); 
    } 
2

はい、できます:

var place = autocomplete.getPlace(); 

document.getElementById('lat').value = place.geometry.location.lat(); 
document.getElementById('lon').value = place.geometry.location.lng(); 
12

のみ必要:

var place = autocomplete.getPlace(); 
// get lat 
var lat = place.geometry.location.lat(); 
// get lng 
var lng = place.geometry.location.lng(); 
+0

Thx mate。治療をしなさい。 'autocomplete'は' new google.maps.places.Autocomplete(nativeElement'、options) 'によって作成されたオブジェクトです。 – dewd

-2
@Override 
public void onPlaceSelected(Place place) { 
    LatLng autoCompleteLatLng = place.getLatLng(); 
    newLoc = new Location("New"); 
    newLoc.setLatitude(autoCompleteLatLng.latitude); 
    newLoc.setLongitude(autoCompleteLatLng.longitude); 

    geoLocate(newLoc);//mark it in map 
} 
関連する問題