Google地图:在没有API的情况下为嵌入式Google地图添加标记

时间:2015-08-13 02:15:33

标签: javascript google-maps google-maps-api-3

从谷歌地图我可以得到这样的嵌入式链接:

   <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

它完美无缺。问题是我想在地图上添加一个标记

e.g。市场指向22.364204,114.1379784,15z

我尝试了一段时间,有些讨论建议我可以使用参数&q=

所以我添加参数

&q=22.364204,114.1379784&z=15&output=embed

和最终代码

<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910&q=22.364204,114.1379784&z=15&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

但标记没有出现。关于那个的任何想法?任何方法都没有使用他们的js api?

非常感谢

3 个答案:

答案 0 :(得分:1)

根据您提供的链接,它可以通过删除额外参数“pb”按预期工作。

<iframe src="http://maps.google.com/maps?q=22.364204,114.1379784&z=15&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

答案 1 :(得分:1)

使用Embed API。有一个wizard可以帮助您创建地图。

<强>参数

q=22.364204,114.1379784 (marker location)
zoom=15                 (initial zoom level)
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=22.364204%2C114.1379784&key=AIzaSyCF5T43TaYZfv7RLFwFPXrPNFpDiC6ffO4" allowfullscreen></iframe>

example

答案 2 :(得分:0)

我使用此代码 在html上

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

在javascript上

 var map;
enter code here
var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(-34.000009, -56.197645),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapCanvas = document.createElement("div");
mapCanvas.id = "canvas";
mapCanvas.style.width = "800px";
mapCanvas.style.height = "400px";
 document.body.appendChild(mapCanvas);
map = new google.maps.Map(mapCanvas, mapOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-34.000009, -56.197645),
    map: map,
    title: 'marker'
 //=====You can even customize the icons here
});
}

google.maps.event.addDomListener(窗口,“加载”,初始化);