2011-07-30 104 views
19

我是新的谷歌地圖, ,我想將其整合到我的網站(黃頁類網站)。Google Maps API v3 - 按地址獲取地圖?

目前,我有以下代碼:

<!DOCTYPE html> 

<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var latlng = new google.maps.LatLng(-34.397, 150.644); 
      var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     }); 
    </script> 
</head> 
<body> 
    <div id="map_canvas" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223);"></div> 
</body> 
</html> 

此代碼的工作,向我展示地圖的特定的緯度/龍

,但是,我希望能夠specifiy的地址,不是緯度/長參數, 因爲我確實有電話簿中公司的地址,但沒有經緯度值。

我試過尋找這個,但我只在V2版本上找到類似的東西,而這個版本已經被棄用了。

回答

10

您可以使用谷歌的地理編碼器:http://code.google.com/apis/maps/documentation/geocoding/要小心 - 你可以出配額,因此請求到地址解析器會失敗

使用谷歌地理編碼API的是受2500查詢限制每天的地理位置請求。

+1

http://code.google.com/apis/maps/documentation/javascript/services.html#Geocoding 也是一個樂於助人的鏈接 – Dementic

12

您在尋找的是Google服務中的地理編碼功能;首先給出一個地址以獲取LatLng,然後調用setCenter將地圖平移到特定位置。谷歌的API包好非常好,你可以看到它是如何工作通過this example

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-canvas'), mapOptions); 
} 

function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.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); 
    } 
    }); 
} 

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

這是爲我工作 –

+0

英文而不是西班牙語鏈接使用https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple – MemeDeveloper

+0

使用此geocoder.geocode時是否還有配額? – basZero

1

gmap3實際上並不爲你做,由另一個答案的建議:它只是給你一個API,抽象掉地理編碼過程的一部分。

答案是:Google實際上並不允許你這樣做。至少在V3,並且因爲這是存在了一年多了......

可能實際的行車路線發送地址,但他們的API已經是非法的一個正常的發送地址(內嵌,基於API的)任何類型的地圖。地理編碼的每日配額是他們在「仍然允許」地址的情況下播放,而實際上完全不允許他們訪問任何真實的網站。

您可以鏈接到一個地圖的地址,但我無法找到這在谷歌的文檔之一:

http://maps.google.com/maps?f=d&saddr=&daddr=this是我的地址,市州

也許我只是有一個問題,這是因爲他們不不提供任何清晰,簡單的文檔 - 我必須前往StackOverflow以獲取我正在尋找的答案。 IE瀏覽器。他們隱約提到你需要一個API密鑰來繞過匿名限制,但不要鏈接到這些限制或者如何在沒有密鑰的情況下使用他們的API。這就是我想要爲skunkworks或概念驗證開發所做的事情。相反,谷歌希望推出他們的商業地圖等。而不是提供實際的信息。

+1

hmm ...谷歌搜索「谷歌地理限制」發現這個http://googlegeodevelopers.blogspot.com/2012/06/lower-pricing-and-simplified-limits.html – Dementic

0
Try this code: 
<?php 
    $arrMap = array(); 
    $address = (isset($_POST['address'])) ? $_POST['address'] : ""; 
    $lat = (isset($_POST['lat'])) ? $_POST['lat'] : ""; 
    $lng = (isset($_POST['lng'])) ? $_POST['lng'] : ""; 

    function getlatlong($address) 
    { 
     $url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' . urlencode($address) . '&sensor=true'; 
     $json = @file_get_contents($url); 
     $data = json_decode($json); 
     if ($data->status == "OK") 
      return $data; 
     else 
      return false; 
    } 

    function getaddress($lat, $lng) 
    { 
     $url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' . trim($lat) . ',' . trim($lng) . '&sensor=true'; 
     $json = @file_get_contents($url); 
     $data = json_decode($json); 
     if ($data->status == "OK") 
      return $data->results[0]->formatted_address; 
     else 
      return false; 
    } 

    if ($lat && $lng) { 
     $arrMap['address'][] = getaddress($lat, $lng); 
     $arrMap['lat'][] = $lat; 
     $arrMap['lng'][] = $lng; 
    } 
    if ($address) { 
     $coordinates = getlatlong($address); 
     $arrMap['lat'][] = $coordinates->results[0]->geometry->location->lat; 
     $arrMap['lng'][] = $coordinates->results[0]->geometry->location->lng; 
     $arrMap['address'][] = $address; 
    } 
    //print_r($arrMap); 
    ?> 
    <!DOCTYPE html> 
    <html> 
     <head> 
      <title>Localizing the Map</title> 
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
      <meta charset="utf-8"> 
      <style> 
       html, body, #map-canvas { 
        height: 90%; 
        margin: 20px; 
        padding: 0px 
       } 
      </style> 
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&language=en"></script> 
      <script type="text/javascript"> 
       function initialize() { 
        var map = new google.maps.Map(document.getElementById("map-canvas"), { 
         center: new google.maps.LatLng(28.635308, 77.22496), 
         zoom: 4, 
         mapTypeId: 'roadmap' 
        }); 
        var infoWindow = new google.maps.InfoWindow; 

    <?php for ($i = 0; $i < count($arrMap['lat']); $i++) { ?> 
       var lat = '<?php echo $arrMap['lat'][$i] ?>'; 
       var lng = '<?php echo $arrMap['lng'][$i] ?>'; 
       var address = '<?php echo $arrMap['address'][$i] ?>'; 
       var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng)); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: point 
       }); 
       var html = '<div id="content">'+ 
        '<div id="siteNotice">'+ 
        '</div>'+ 
        '<h1 id="firstHeading" class="firstHeading"> </h1>'+ 
        '<div id="bodyContent">'+ 
        '<p><b>Latitude: </b>'+lat+ 
        '<br><b>Longitude: </b>'+lng+ 
        '<br><b>Address: </b>'+address+ 
        '</p>'+ 
        '</div>'+ 
        '</div>'; 
       bindInfoWindow(marker, map, infoWindow, html); 
    <?php } ?> 
      google.maps.event.addListener(map,'click',function(event) { 
       // alert(event.latLng.lat() + ', ' + event.latLng.lng()); 
       var clickLat = event.latLng.lat().toFixed(8);; 
       var clickLng = event.latLng.lng().toFixed(8);; 
       document.getElementById("lat").value=clickLat; 
       document.getElementById("lng").value=clickLng; 
       marker.setPosition(event.latLng); 
      }); 

     } 

     function bindInfoWindow(marker, map, infoWindow, html) { 
      google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.setContent(html); 
       infoWindow.open(map, marker); 
      }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
      </script> 
     </head> 
     <body> 
      <form action="" name="searchForm" id="searchForm" method="post"> 
       <div class="click-latlong"> 
        <label>Latitude: </label> 
        <input type="text" name="lat" id="lat" value=""> 
        <label>Longitude: </label> 
        <input type="text" name="lng" id="lng" value=""> 
        <input type="submit" name="sbmtLatlong" id="updateLatlong" value="Submit"/> 
       </div> 
       <div class="click-latlong"> 
        <label>Address: </label><input type="text" name="address" id="address" value="" /> 
        <input type="submit" name="sbmtAddress" id="sbmtFrm" value="Search" /> 
       </div> 
      </form> 
      <div id="map-canvas"></div> 
     </body> 
    </html> 
8

如果你是好有一個iframe,你可以跳過地理編碼麻煩和使用Google Maps Embed API

的谷歌地圖嵌入API是免費使用(沒有配額或要求 限制) ,但是您必須註冊一個免費的API密鑰才能在您的網站上嵌入地圖 。

例如,你會嵌入此到您的網頁(替換用自己的個人谷歌API密鑰省略號):

<iframe width="600" height="450" frameborder="0" style="border:0" 
src="https://www.google.com/maps/embed/v1/place? 
q=301+Park+Avenue,+NY,+United+States&key=..."></iframe> 

顯然,這樣做的用處將取決於你的使用情況,但我喜歡這個作爲一種快速而骯髒的解決方

+0

你也必須確定你的地圖有廣告https: //developers.google.com/maps/documentation/embed/guide地圖上的廣告 Google地圖嵌入API可能包含地圖上的廣告。任何給定地圖中顯示的廣告格式和廣告集可能會更改,恕不另行通知。 –