谷歌地图 - 按城市名称嵌入地图答案

【问题标题】：Google maps - embed a map by city name谷歌地图 - 按城市名称嵌入地图
【发布时间】：2016-11-21 14:18:06
【问题描述】：

有没有办法像下面的代码一样只使用城市名称来嵌入地图？

<iframe src="https://www.google.com/maps/embed?pb=Paris,France" width="600" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>

【问题讨论】：

标签： javascript html google-maps iframe google-maps-api-3

【解决方案1】：

请参阅Embed API 的文档。

地点模式

地点模式在特定地点或地址（例如地标、商业、地理特征或城镇）显示地图图钉。

https://www.google.com/maps/embed/v1/place ?key=YOUR_API_KEY &q=埃菲尔+铁塔,巴黎+法国

以下 URL 参数是必需的：

q 定义在地图上突出显示的位置。它接受位置作为地名、地址或地点 ID。该字符串应该是 URL 转义的，因此“City Hall, New York, NY”之类的地址应该转换为 City+Hall,New+York,NY。（转义空格时，Google Maps Embed API 支持 + 和 %20。）地点 ID 应以 place_id: 为前缀。

以法国巴黎为例：

<iframe width="100%" height="600" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=Paris, France&amp;key=YOUR_API_KEY">
</iframe>

working example

【讨论】：

【解决方案2】：

您可以使用 javascript 或 jQuery 进行谷歌地图 api 的点击事件，像这样..

                     $('...ELEMENT, CLASS, BUTTON....').click(function(){
                        $.ajax({
                            type:"GET",
                            url:"https://maps.googleapis.com/maps/api/geocode/xml?address=...CITY NAME...&key=...YOUR KEY GOES ERE...",
                            dataType:'xml',
                            success: function(xml){

                                    }
                                });
                            }
                        });
                    });

如果您愿意，可以使用 JSON

或者如果您不想要点击和 ajax 功能，只需复制 n 粘贴带有您的键和城市名称的 url

您可以从这里创建一个密钥： https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&keyType=CLIENT_SIDE&reusekey=true&pli=1

希望这会有所帮助。

【讨论】：