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

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 = "410 walker street Lowell MA 01851";

• 最后在我的 HTML 属性src="" 的一部分中将它们打印为“410+walker+street+Lowell+MA+01851”。

问题

• 我完全不确定这种方法是否是最佳实践。
• 有可能吗？如何 ？
• 谁能帮助阐明这一点？

Answer 1

我也在做类似的事情。

如果您在 iframe url 中找到 ?pb=，则表示它已缓存在某处。如果您输入自己的地址，请记住它需要进行地理定位（lat、lng），而 iframe 本身不会为您执行此操作。

无需 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 question。

Answer 2

<?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 3

根据您想要完成的任务，如果目标是向访问者显示离他们当前位置最近的企业位置，那么可以结合使用 IP 英特尔（城市网络）和他们的 GPS 位置来实现， 在移动。

我不确定您将如何自己从头开始执行此操作，但我知道在 Personyze 等个性化软件服务上，有一个小部件，您只需上传位置，访问者就会自动显示所在位置离他们最近。您还可以为他们提供附近的替代位置等。如果那是您的用例，值得一试。

Answer 4

使用$.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 5

您想根据用户输入的地址显示位置吗？ 可能这会对您有所帮助，但限制在 google place 服务器上存储数据。 试试这个代码sn-p，可能对你有点帮助。

我已经编辑了我的答案，因为您没有使用 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">