如何根据地址动态“生成”谷歌地图？

Question

详细

• 我想打印一张存储在any
中<span>地址的地图
• 我的地址是：410 walker street Lowell MA 01851
• 我的<span>是Address: <span id="address" > 410 walker street Lowell MA 01851 </span>
• 我想使用Google Map API

我尝试了什么

Address: <span id="address" > 410 walker street Lowell MA 01851 </span>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- "Highlight a place or an address" -->
<iframe 

width="600" height="450" frameborder="0" style="border:0"
src="

https://www.google.com/maps/embed/v1/place?q=

410+walker+street+Lowell+MA+01851

&key=*****

">

</iframe>

这是我的结果

到目前为止一切顺利，一切正常，而且它起作用，因为我手动输入了地址 像这样?q = 410+walker+street+Lowell+MA+01851

但我不想手动输入地址。我该如何动态执行此操作？我需要一些建议 - 拜托。

我的方法

• 我想知道我是否可以将地址存储在变量$address

中

• $ address =＆＃34; 410 walker street Lowell MA 01851＆＃34;;

• 最后将它们打印出来作为＆＃34; 410 + walker + street + Lowell + MA + 01851＆＃34;部分我的HTML属性src=""。

问题

• 我完全不确定这种方法是最好的做法。
• 有可能吗？怎么样 ？
• 任何人都可以帮忙解释一下吗？

Answer 1

使用$.text()检索地址，对其进行编码（通过encodeURIComponent），然后设置iframe的src - 属性（使用编码地址）：

<span id="address"> 410 walker street Lowell MA 01851 </span>
<iframe id="map" width="600" height="450"></iframe>
<script  type="text/javascript">
jQuery(
  function($)
  {
       var q=encodeURIComponent($('#address').text());
       $('#map')
        .attr('src',
             'https://www.google.com/maps/embed/v1/place?key=***&q='+q);

  }
);
</script>

演示：http://jsfiddle.net/doktormolle/pkjq1hrb/

Answer 2

我正在做类似的事情。

如果您在iframe网址中找到?pb=，则表示它已在某处缓存。如果您输入自己的地址，请记住它需要进行地理定位（lat，lng），而iframe本身并不适合您。

同样解释here，可以做没有API密钥的工作，您可以尝试执行以下操作：

$(document).ready( function(){
    var addr = 'Any Street 670, Any City';
    function(){  

        var embed= "<iframe width='425' height='350' frameborder='0'  
        scrolling='no' marginheight='0' marginwidth='0'    
        src='https://maps.google.com/maps?&amp;q="+   
        encodeURIComponent( addr ) +  
        "&amp;output=embed'></iframe>";  

        $('.place').html(embed);
    });
});

这对我很有用。

如果还要使用坐标，请查看this SO问题。

Answer 3

<?php $address = 'Any Street 670, Any City' ; /* Insert address Here */

echo '<iframe width="100%" height="170" frameborder="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=' . str_replace(",", "", str_replace(" ", "+", $address)) . '&z=14&output=embed"></iframe>';
                            ?>

Answer 4

您想根据用户输入的地址显示位置吗？ 可能这会对你有所帮助，但在谷歌地方服务器上存储数据的限制。 试试这个代码片段，对你来说可能有点帮助。

我编辑了我的答案，因为你没有使用jquery。如果您正在使用jquery，请查看我之前的修订版。

var map_options = {
    center: new google.maps.LatLng(-2.548926, 118.0148634),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

var input = document.getElementById("keyword");
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo("bounds", map);

var marker = new google.maps.Marker({
    map: map,
    zoom: 14,
    animation: google.maps.Animation.BOUNCE
});

google.maps.event.addListener(autocomplete, "place_changed", function () {
    var place = autocomplete.getPlace();

    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(15);
    }

    marker.setPosition(place.geometry.location);
});

google.maps.event.addListener(map, "click", function (event) {
    marker.setPosition(event.latLng);
});

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div id="map_canvas" style="width:530px; height:250px"></div>
<label for="keyword">Location :</label>
<input type="text" name="keyword" id="keyword">

Answer 5

根据您想要完成的目标，如果目标是向访问者显示距离当前位置最近的商家位置，那么可以使用IP intel（城市网络）的组合来实现此目的和他们的GPS位置，在移动设备上。

我不确定你是如何从零开始自己做的，但我知道在Personyze这样的个性化软件服务上，有一个小工具，只需上传位置，访问者就会自动显示位置最接近他们的。您也可以在附近提供替代位置等。值得一试，如果这是您的使用案例。