Question

我是谷歌地图的新手，我想将它整合到我的网站（黄页类网站）。

我目前有以下代码：

<!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>

此代码确实有效，并向我显示特定Lat / Long

的地图

但是，我希望能够指定地址而不是纬度/长度参数，因为我确实拥有电话簿中公司的地址，但没有纬度/经度值。

我试图搜索这个，但我只在V2版本上发现了类似的内容，这已被弃用。

Answer 1

您可以使用Google地理编码器：http://code.google.com/apis/maps/documentation/geocoding/请注意 - 您可能超出配额，因此对地理编码器的请求将失败

使用Google地理编码API每天的查询限制为2,500个地理定位请求。

Answer 2

您正在寻找的是谷歌服务中的地理编码功能;首先给出一个地址来获取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);

Answer 3

如果您对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>

显然，这方面的用处将取决于您的使用案例，但我认为这是一个快速而肮脏的解决方案。

Answer 4

jQuery有一个插件，它的名字是gMap3，你可以在这里看到它：

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

在这里

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

Answer 5

gmap3实际上没有为你做这件事，正如另一个答案所建议的那样：它只是为你提供了一个API来抽象出过程中的地理编码部分。

答案是：Google实际上不允许你再这样做了。至少在V3没有，因为那已经存在了一年多......

你可以实际发送行车路线的地址，但是他们的API规定发送任何类型的普通（嵌入式，基于API）地图的地址都是非法的。地理编码的每日配额是他们在＃34;仍允许＆＃34;地址虽然实际上完全不允许任何真实的网站。

您可以链接到包含地址的地图，但我无法在Google的文档中找到：

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

也许我只是遇到问题，因为他们没有提供任何清晰，简单的文档 - 我必须来StackOverflow来获得我正在寻找的答案。 IE浏览器。他们含糊地提到你需要一个API密钥来绕过匿名限制，但是不要将这些限制链接到这些限制或如何在没有密钥的情况下使用他们的API。这就是我想要做的skunkworks或概念验证开发。相反，谷歌想推送他们的地图商业等，而不是提供实际信息。

Answer 6

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>

Google Maps API v3 - 按地址获取地图？

6 个答案: