Google Maps API v3第二张地图调整大小和中心 [英] Google Maps API v3 Second Map Resize and Center
问题描述
我忘记了wordpress上的嵌入地图，并转移到谷歌地图api v3。
所以，我使用这个：
< script type =text / javascriptsrc =https ？：//maps.google.com/maps/api/js传感器=真>< /脚本>
以及此功能：
函数initialize（）{
//在下一行代替0，并在教程中使用经度和纬度数字。
var myLatlng = new google.maps.LatLng（40.654372，-7.914174）;
var myLatlng1 = new google.maps.LatLng（30.654372，-6.914174）;
var myOptions = {
zoom：16，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var myOptions1 = {
zoom：16，
center：myLatlng1，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
//这里是位置我们称之为标记。
// getElementById必须与您为地图容器提供的id相同
var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
var map1 = new google.maps.Map（document.getElementById（map_canvas1），myOptions1）;
//google.maps.event.trigger（map1，'resize'）;
//map1.setCenter（myLatlng1）;
var marker = new google.maps.Marker（{
position：myLatlng，
title：在这里添加标记的标题
}）;
var contentString ='< div id =content>'+
'< div id =siteNotice>'+
'< \ / div>'+
'< h2 id =firstHeadingclass =firstHeading> ADD TITLE HERE< \ / h2>'+
'< div id =bodyContent> ;'+
'< p style =font-size：1em> ADD DESCRIPTION HERE< \ / p>'+
'< \ / div>'+
'< \ / div>';
var infowindow = new google.maps.InfoWindow（{
content：contentString
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
}）;
//要将标记添加到地图，请调用setMap（）;
marker.setMap（map）;
函数loadScript（）{
var script = document.createElement（script）;
script.type =text / javascript;
script.src =http://maps.google.com/maps/api/js?sensor=false&callback=initialize;
document.body.appendChild（script）;
}
window.onload = loadScript;
正如你所看到的那样，有两张地图被宣布。在我的网站上，我使用水平制表符来显示地图之间的交替。
问题是我在其他主题中发现的一个，但解决方案给出的似乎工作。你可以在我注释到的行中看到：
// google.maps.event.trigger（map1，'resize'） ; b
$ map $ set $ my
$ 这段代码无法集中处理第二张地图。地图不适合div正确，中心图标在左上角，这是通常的问题。
我猜你已经知道问题是什么，然而，如果你需要图片，我会提供他们没有问题。
标签代码如何在wordpress上显示：
$ b $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ < div id =map_canvasstyle =width：100％; height：300px; border：1px solid;>< / div>
[/ wptabcontent]
[wptabtitle] Brasil [/ wptabtitle] [wptabcontent]
< div id =map_canvas1style =width：100％ ; height：300px; border：1px solid;>< / div>
[/ wptabcontent]
[/ wptabs]
好的，这个插件似乎使用 jQuery UI ，那么你可以这样做：
$（'＃tabs'）。bind（'tabsshow'，function（event，ui）{
if（ui.panel.id ==tab-map-2）{
google.maps.event.trigger（map1，'resize'）;
map1.setCenter（myLatlng1 ）;
}
}）;
其中 #tabs 位于div ID之外，制表位图-2 是第二张地图的标签面板ID。
希望这有助于您。
i forgot the embed maps on wordpress and moved to the google maps api v3. So, i'm using this:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
and this function:
function initialize() {
//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(30.654372, -6.914174);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var myOptions1 = {
zoom: 16,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
//google.maps.event.trigger(map1, 'resize');
//map1.setCenter(myLatlng1);
var marker = new google.maps.Marker({
position: myLatlng,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<\/div>'+
'<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
'<div id="bodyContent">'+
'<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
'<\/div>'+
'<\/div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
as you can see, there are two maps declared. Im my website, i'm using horizontal tabs to alternate between showing maps.
The problem is one i found in other topics here, but the solutions gave there doesn't seem to work. as you can see in the lines i commented:
//google.maps.event.trigger(map1, 'resize');
//map1.setCenter(myLatlng1);
this code is not working to center the second map. The map does not fit on the div correctly, and the center icon is on the left the corner, the usual problem.
I guess you already know what the problems are, however if you need pictures i will provide them without a problem.
How the tabs code looks on wordpress:
[wptabs type="accordion" mode="horizontal"]
[wptabtitle] Portugal[/wptabtitle] [wptabcontent]
<div id="map_canvas" style="width: 100%; height: 300px; border: 1px solid;"></div>
[/wptabcontent]
[wptabtitle] Brasil[/wptabtitle] [wptabcontent]
<div id="map_canvas1" style="width: 100%; height: 300px; border: 1px solid;"></div>
[/wptabcontent]
[/wptabs]
Ok, it seems that this plugin uses jQuery UI, then you can do something like this:
$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "tab-map-2") {
google.maps.event.trigger(map1, 'resize');
map1.setCenter(myLatlng1);
}
});
Where #tabs is outside div ID and tab-map-2 is your tab panel ID for second map.
Hope this helps.
这篇关于Google Maps API v3第二张地图调整大小和中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
