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

Details

• I want to print a map base on any address that are stored in my <span>
• 我想要基于存储在我的中的任何地址打印一个地图
• My address is : 410 walker street Lowell MA 01851
• 我的地址是:沃克街410号
• My <span> is Address: <span id="address" > 410 walker street Lowell MA 01851 </span>
• 我的是地址: 410 walker street Lowell MA 01851
• I want to use Google Map API for that
• 我想用谷歌地图API

What I have tried

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>

Here is my result

So far so good, everything is working, and it's work because I input the address manually like this ?q = 410+walker+street+Lowell+MA+01851

到目前为止，一切都很好，这很好，因为我手动输入地址?q = 410+walker+street+Lowell+MA+01851

but I don't want the input the address manually. How do I do this dynamically ? I need some suggestions - please.

但我不希望手动输入地址。我如何动态地做到这一点?我需要一些建议。

My Approach

• I was wondering if I can store my address in a variable $address

  我想知道我是否可以将我的地址存储在一个可变的$address中

• $address = "410 walker street Lowell MA 01851";

  $address = "410 walker street Lowell MA 01851";

• and finally print them back out as "410+walker+street+Lowell+MA+01851" in part of my HTML attribute src="".

  最后在HTML属性src=""中打印为410+walker+street+Lowell+MA+01851。

Questions

• I am not sure at all that this approach is the best practice for this.
• 我一点也不确定这种方法是否是最好的实践。
• Is it possible ? How ?
• 是可能的吗?如何?
• Can anyone help shed the light on this ?
• 有人能帮我阐明这一点吗?

5 个解决方案

#1

Use $.text() to retrieve the address, encode it(via encodeURIComponent), and then set the src-attribute of the iframe(by using the encoded address):

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

Demo: http://jsfiddle.net/doktormolle/pkjq1hrb/

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

#2

I was doing similar stuff.

我也在做类似的事情。

If you find ?pb= within the iframe url, it means that it's cached somewhere. In case you put your own address, have in mind that it needs to be geolocated (lat, lng) and the iframe itself doesn't do that for you.

如果在iframe url中找到?pb=，则意味着它被缓存在某个地方。如果您放置了自己的地址，请记住需要对其进行地理定位(lat、lng)，而iframe本身不会为您做这些。

Also explained here, it is possible to do the work without API Key you could try to do something like:

这里也解释了，不使用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);
    });
});

It is working nicely for me.

它对我来说很好。

For working also with coordinates, have a look at this SO question.

对于使用坐标的工作，请看看这个SO问题。

#3

you wanna show location based on address that user input ? may be this will help you, but in limitation about data storing on google place server. try this code snippet, may be a little help for you.

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

I've edited my answer, because you're not using jquery. If you're using jquery, look at my previous revision..

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

#4

<?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>';
                            ?>

#5

Depending on what you want to accomplish, if the goal is to show the visitor the nearest location of a business to their current location, then it's possible to do this using a combination of IP intel (city network) and their GPS location, on mobile.

根据您想要实现的目标，如果目标是向访问者显示企业到当前位置的最近位置，那么可以使用IP intel (city network)和移动设备上的GPS位置。

I'm not sure how you would do this yourself from scratch, but I do know that on personalization software services like Personyze, there is a widget for it, you simply upload locations and the visitor is automatically shown the location that is closest to them. You can also offer them alternative locations nearby, etc. Worth checking out, if that's your use case.

我不确定你会如何从头开始，但我知道在个性化软件服务，如Personyze，有一个小部件，你只是上传位置，访问者会自动显示离他们最近的位置。如果这是你的用例，你也可以为他们提供附近的其他地点等等。