web-dev-qa-db-ja.com

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>

このコードは機能し、特定の緯度/経度のマップを表示します

しかし、電話帳には会社の住所はあるが、緯度/経度の値はないため、住所を指定し、緯度/経度のパラメータは指定できません。

これを検索してみましたが、V2バージョンで同様のものが見つかりましたが、これは廃止されました。

google-maps-api-3street-address
21
Dementic

Googleジオコーダーを使用できます： http://code.google.com/apis/maps/documentation/geocoding/ 注意してください-クォータので、ジオコーダへのリクエストは失敗します

Google Geocoding APIの使用には、1日あたり2,500件の位置情報リクエストのクエリ制限が適用されます。

12
JohnJohnGa

探しているのは、Googleサービスのジオコード機能です。最初に住所を指定してLatLngを取得し、次にsetCenterを呼び出して特定の場所に地図をパンします。 GoogleのAPIは非常に優れており、 この例 でどのように機能するかを確認できます。

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);
12
Howard

Iframeに問題がない場合は、ジオコーディングの手間を省いて、 Google Maps Embed API を使用できます。

Google Maps Embed APIは無料で使用できます（クォータやリクエストの制限なし）が、サイトに地図を埋め込むには無料のAPIキーに登録する必要があります。

たとえば、これをページに埋め込みます（省略記号を独自のGoogle 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>

明らかに、これの有用性はユースケースに依存しますが、私はこれを迅速で汚い解決策として気に入っています。

8
User

それを作成するjQueryのプラグインがあり、その名前はgMap3であり、ここで実際に動作を確認できます。

http://gmap3.net/examples/address-lookup.html

そしてここ

http://jsfiddle.net/gzF6w/1/

1
jlledom

別の答えで示唆されているように、gmap3は実際にはそれを行いません。プロセスのジオコーディング部分を抽象化するAPIを提供するだけです。

答えは次のとおりです。Googleでは実際にこれを行うことはできません。少なくともV3ではなく、それが1年以上続いているので...

あなたはcouldを実際に運転ルートのアドレスを送信しますが、彼らのAPIにより、通常の（埋め込み、APIベースの）あらゆる種類。ジオコーディングの1日の割り当ては、「まだ許可されている」アドレスでのプレイですが、実際には、実際のWebサイトでは完全に許可されていません。

アドレスを使用して地図にリンクできますが、Googleのドキュメントでもこれを見つけることができません。

http://maps.google.com/maps?f=d&saddr=&daddr=this は私の住所、都道府県です

明確で簡単なドキュメントを提供していないため、これに問題があるのか​​もしれません-私が探している答えを得るためにStackOverflowに来なければなりません。すなわち。匿名の制限を回避するにはAPIキーが必要であると漠然と述べていますが、それらの制限とは関係なく、キーなしでAPIを使用する方法にもリンクしていません。これは、skunkworksまたは概念実証開発のために私がやりたいことです。代わりに、Googleは実際の情報を提供するのではなく、ビジネス向けマップなどをプッシュしたいと考えています。

1
Liam
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>
0
Indrajeet Singh