中心参数无法在新的Google地图中嵌入 [英] center parameter not working in new google maps embed

问题描述

我已经使用新的嵌入代码为新的谷歌地图记录这里：

https://developers.google.com/maps/documentation/embed/guide

我的代码是：

 < iframe width =500
 height =450
 frameborder = 0style =border：0
 src =https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA> ; 
< / iframe> 
  

这个工作正常，并正确显示地图

当我尝试使用下面的代码添加中心参数时，它会将地图缩小到整个世界视图中。

  < iframe width =500
 height =450
 frameborder =0style =border：0
 src =https://www.google.com/地图/嵌入/ V1 /位键= KEY&安培; q =空间+针，西雅图+ WA&安培;中心= 47.620467，-122.349116\" > 
< / iframe> 
  

我最终想要做的是移动地图，使其不以实际标记为中心，但目前我正在测试一个经纬度和很接近标记的长度。

我在这里创建了一个jsfiddle http://jsfiddle.net/njwood60/vK5mC/1/

显示这两个例子。

我是否正确使用& center参数？是否有其他人获得了& center参数？

我已经检查过我使用的经纬度和长度是否显示在地图上

解决方案

唉，这似乎是当前Embed API的一个错误。该文件表明，可以使用'center ='with / place，但实际上这是行不通的。

我遇到了同样的问题，增加'center = '到iframe网址打破了地图。当我将'/ place'改为'/ view'并删除'q = ...'部分时，它完美地工作。我已经向Google发送了关于此的反馈。您可以通过此页上的对此文档的反馈链接完成此操作：

https://developers.google.com/maps/documentation/embed/guide#optional_parameters

要解决这个问题，我已经切换到Google Maps JavaScript API v3。这个API比较灵活，作为一个奖励，它也可以让你摆脱iframe。

在你的情况下，这应该可以做到这一点：

放在这之前

 < script type =text / javascript> 
 var map; 
函数initialize（）{
 var mapOptions = {
 zoom：13，
 center：new google.maps.LatLng（47.620467，-122.349116），
}; 
 
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 
 var myLatlng = new google.maps.LatLng（47.620614，-122.348880）; 
 
 var marker = new google.maps.Marker（{
 position：myLatlng，
 map：map，
 title：'Space Needle，Seattle WA'
}）; 
 
 
函数loadScript（）{
 var script = document.createElement（'script'）; 
 script.type ='text / javascript'; 
 script.src ='https://maps.googleapis.com/maps/api/js?key={API_KEY}&callback=initialize'; 
 document.body.appendChild（script）; 
} 
 
 window.onload = loadScript; 
 
< / script> 
  

并添加

 < div id =map-canvasstyle =width：500px; height：450px;>< / div> 
  

添加到您的HTML中。

A缺点是您需要通过搜索谷歌地图手动调整标记的纬度/经度，右键单击然后点击这里有什么。您已经需要为中心坐标执行此操作，所以这不应该是一个大问题。如果您想自动执行此操作，您可以使用Google地图地理编码服务，但会发生在每个视图上： com / maps / documentation / javascript / examples / geocoding-simplerel =noreferrer> https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

I have used the new embed code for the new google maps as documented here:

https://developers.google.com/maps/documentation/embed/guide

My code is:

<iframe width="500"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA">
</iframe>

This works fine and displays the map correctly

When I try to add the "center" parameter using the below code it zooms the map out to the whole world view

<iframe width="500"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA&center=47.620467,-122.349116">
</iframe>

What I ultimately want to do is move the map so it is not centered on the actual marker, but at the moment I am testing with a lat and long that are very close to the marker.

I have created a jsfiddle here http://jsfiddle.net/njwood60/vK5mC/1/

Showing the two examples.

Am I using the &center parameter correctly? Has anyone else got the &center parameter working?

I have checked that the lat and long I used are in the map displayed

解决方案

Alas this seems to be a bug with the current Embed API. The documentation indicates that it's possible to use 'center=' with /place but in practise this doesn't work.

I ran into the same problem, adding 'center=' to the iframe URL broke the map. It worked flawlessly when I changed '/place' into '/view' and removed the 'q=...' part. I've sent feedback to Google about this. You can do this through the 'Feedback on this document' link on this page:

https://developers.google.com/maps/documentation/embed/guide#optional_parameters

To work around this I've switched to the Google Maps Javascript API v3. This API is quite a bit more flexible and as a bonus it also rids you of the iframe.

In your case this should do the trick:

Put this just before

<script type="text/javascript">
var map;
function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(47.620467,-122.349116),
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var myLatlng = new google.maps.LatLng(47.620614, -122.348880);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Space Needle, Seattle WA'
  });
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?key={API_KEY}&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

</script>

And add

<div id="map-canvas" style="width: 500px; height: 450px;"></div>

to your HTML somewhere.

A disadvantage is that you need to manually adjust the Lat/Lon for the marker by searching Google Maps, right click and then "What's here". You already need to do this for the center coordinates so this shouldn't be a big problem. If you want to automate this you can use the Google Maps Geocoding service but that would happen on every view:

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

这篇关于中心参数无法在新的Google地图中嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！