創建用於生成Google Map的搜索表單

我必須創建一個表單，該表單接受意大利城市的名稱作爲其相關參數。提交後，表單值應發送至Google地圖服務，Google地圖服務應返回顯示該城市位置的完整地圖。我非常喜歡Google地圖的新手，所以我不知道如何做到這一點。我已經有一個API密鑰和所有相關的Google文檔，但是，我沒有找到一個很好的教程，清楚地解釋了使其工作所需的所有步驟。我知道在某個地方必須有一個轉換爲地理編碼（我猜是經緯度），但我對這一點並不十分了解。感謝大家花時間回答我的問題。創建用於生成Google Map的搜索表單

來源

2010-10-22 Gabriele Romanato

最好的文檔是谷歌網站在這裏： http://code.google.com/apis/maps/index.html

上有谷歌網站在這裏具體的例子： http://code.google.com/apis/maps/documentation/javascript/examples/index.html

和工作地址解析例子在這裏（使用查看源文件看實施）： http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html

如果您使用JavaScript API，我建議您使用不需要API密鑰的版本3。

來源

2010-10-22 16:04:15 mistrmark

首先，我會建議使用v3 API而不是v2 API，因爲後者已被棄用，以支持新版本。 v3 API不需要API密鑰。

然後你描述的很容易。您可以使用Google Maps JavaScript API提供的Geocoding Services。沒有必要使用Server-side Geocoding Services，因爲這可以完全在JavaScript的客戶端完成。請看下面的例子：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Geocoding Demo</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
      type="text/javascript"></script> 
</head> 
<body> 
    <div id="map" style="width: 400px; height: 300px;"></div> 

    <input type="text" id="search"> 
    <input type="button" onclick="geocode();" value="Search"> 

    <script type="text/javascript"> 
    var map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.TERRAIN, 
     center: new google.maps.LatLng(42.49, 18.46), 
     zoom: 6 
    }); 

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

    function geocode() { 
     geocoder.geocode({ 
      'address': document.getElementById('search').value 
     }, 
     function(results, status) { 
      if(status == google.maps.GeocoderStatus.OK) { 
       new google.maps.Marker({ 
       position: results[0].geometry.location, 
       map: map 
       }); 
       map.setCenter(results[0].geometry.location); 
      } 
     }); 
    } 
    </script> 
</body> 
</html>

截圖：

alt text

來源

2010-10-22 16:08:12

創建用於生成Google Map的搜索表單

回答

相關問題