关键词：
【中文标题】使用 JavaScript 的 Google 地图无法在 jQuery 选项卡中正确显示【英文标题】：Google Maps using JavaScript is not displaying properly in jQuery tab 【发布时间】：2014-02-23 20:14:39 【问题描述】：我有 3 个使用 jQuery 和 CSS 创建的选项卡，例如
不显示包含 Google 地图的位置选项卡。问题出在哪里？
<div id="map_canvas" style="width:500px;height:360px;border:1px solid #333333;"></div>
这个 div 在一个 jQuery 选项卡（位置）内，代码是：
<div class="detail_tab_left">
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Amenities</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Specification</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">Location </label>
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1" style="overflow: scroll; overflow-x: hidden; width:731px;">
<?php if($get_aminities)
foreach($get_aminities as $val)
?>
<?=$val['feature_value'] ?>
<?php else ?>
<div style="font-family:lato; font-size:14px; color:#333334;"> No AMENITIES! </ div>
<?php ?>
</div>
<div class="content-2" style="overflow: scroll; overflow-x: hidden; width:731px;">
<?php if($get_specification)
foreach($get_specification as $val_specification)
?>
<div style="font-family:lato; font-size:14px; color:#333334;line-height:23px; "><?=$val_specification['feature_value'] ?>.</div>
<?php else ?>
<div style="font-family:lato; font-size:14px; color:#333334;">NO SPECIFICATION</div>
<?php ?>
</div>
<div class="content-3">
<?php
$location=substr($value['property_location'],1,-1);
if($location)
$val_loc=explode(",","$location");
//print_r($val_loc);
?>
<input type="hidden" id="latitude" name="latitude" value="<?=$val_loc['0']?>">
<input type="hidden" id="longitude" name="longitude" value="<?=$val_loc['1']?>">
<input type="hidden" id="map_title" name="map_title" value="<?=$value['property_type']." ".$value['property_listing_type']." at ".$value['property_city']?>">
<input type="hidden" id="map_price" name="map_price" value="<?=$total_price?> <?=$total_price_unit?>">
<input type="hidden" id="map_location" name="map_location" value="<?=$value['property_city']?>">
<div id="map_canvas" style="width:1042px;height:360px;border:1px solid #333333;display: block;"></div>
<script language="javascript">
var myLatlng = new google.maps.LatLng($('#latitude').val(),$('#longitude').val());
var myOptions =
zoom: 13,
center: myLatlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker(
draggable: false,
position: myLatlng,
map: map,
title: 'Property Location'
);
var contentString = '<div style="line-height:20px;font-size:11px;padding-top:5px"><div align="left"><b>'+$('#map_title').val()+'</b></div>';
contentString += '<div align="left">Total Price: '+$('#map_price').val()+'</div>';
contentString += '<div align="left">Location: '+$('#map_location').val()+'</div>';
var contentString = contentString;
var infowindow = new google.maps.InfoWindow(
content: contentString
);
google.maps.event.addListener(marker, 'click', function()
infowindow.open(map,marker);
);
</script>
</div>
</div>
</section>
</div>
谁能帮帮我？
【问题讨论】：
我只是在我的 jqury 选项卡（位置）中替换了这个 googlemap 代码，它工作正常。是否可以在 jquery 选项卡中添加 div？ 【参考方案1】：尝试在标签的click 事件上重新加载地图。
$('label[for=tab-3]').click( function ()
google.maps.event.trigger(map, 'resize');
)
就像@Dh 建议的那样，在开始时将map 声明为全局。
【讨论】：
页面上的 JavaScript 错误太多。事实上，我不确定您是否正确加载/引用 jQuery。它需要一个知道自己在做什么的开发人员的工作，对不起:)【参考方案2】：请更正以下错误，希望能解决您的问题。
在脚本开头定义map varialbe如下
1)var map= null;
2) 您在创建 map 对象之前使用它。
google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() );
把上面的代码放在下面一行
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
【讨论】：
其实问题是 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map_canvas id取自 这个div有问题可以加div在 jquery 选项卡内？ 我删除了这段代码 google.maps.event.trigger(map, 'resize'); map.setZoom(map.getZoom());实际上我的问题是 这个 div 在 jquery 选项卡中不起作用使用 JavaScript 的 Google 地图无法在 jQuery 选项卡中正确显示
】使用JavaScript的Google地图无法在jQuery选项卡中正确显示【英文标题】：GoogleMapsusingJavaScriptisnotdisplayingproperlyinjQuerytab【发布时间】：2014-02-2320:14:39【问题描述】：我有3个使用jQuery和CSS创建的选项卡，例如不显示包含Google地图的... 查看详情
将 Google“我的地图”图层添加到 Google Maps Javascript API
】将Google“我的地图”图层添加到GoogleMapsJavascriptAPI【英文标题】：AddGoogle"MyMaps"LayertoGoogleMapsJavascriptAPI【发布时间】：2009-09-2409:39:54【问题描述】：我想在我们的网站上放一张谷歌地图。我知道可以使用Javascript将自定义... 查看详情
在 Javascript 中使用 DJango 模板标签添加 Google 地图标记
】在Javascript中使用DJango模板标签添加Google地图标记【英文标题】：AddingGoogleMapMarkerswithDJangoTemplateTagsinJavascript【发布时间】：2012-02-1001:59:22【问题描述】：我正在尝试使用Django模板标签变量作为纬度和经度向地图添加一堆地图标... 查看详情
php使用wordpress高级自定义字段实现google地图的无javascript实现(代码片段)
php使用wordpress高级自定义字段实现google地图的无javascript实现(代码片段)
google地图中每条折线的infowindow不会使用javascript显示
...infoWindow..这里我有几个标记，我在其中创建了路径：使用Javascript<style>#map{height:100%;width:100%;}</style><scriptasyncdefersrc="https://maps.googleapis.com/map 查看详情
如何使用 Google Maps JavaScript API v3 在谷歌地图中获取查看区域中心的坐标
】如何使用GoogleMapsJavaScriptAPIv3在谷歌地图中获取查看区域中心的坐标【英文标题】：howtogetcoordinatesofthecenteroftheviewedareaingooglemapsusingGoogleMapsJavaScriptAPIv3【发布时间】：2012-04-0607:49:50【问题描述】：如何使用javascriptGoogleMapsJavaScrip... 查看详情
javascript使用google地图进行html5地理定位(代码片段)
Javascript Google地图，按经度和纬度坐标显示图钉[重复]
】JavascriptGoogle地图，按经度和纬度坐标显示图钉[重复]【英文标题】：JavascriptGooglemap,showpinsbylongitudeandlatitudecoordinates[duplicate]【发布时间】：2014-01-0719:46:18【问题描述】：您好，我有一个Javascript代码，它显示了一个带有引脚的... 查看详情
使用新的 Google Chart API 的动态地图标记图标？
...【问题描述】：多年来，我使用此处描述的Google图表API在Javascript中创建了Google动态地图标记：Dynamicicons地图标记的生成几天后不再起作用。链接顶部清楚地说明了这一点：“警告：此API已弃用，计划于2 查看详情
使用 PHP 创建 Google 地图标记
...这些值。看起来您实际上可以添加这些的唯一方法是通过javascript。 查看详情
如何在 JavaScript API 的 Google 地图中放置 10,000,000 个标记或折线 [关闭]
】如何在JavaScriptAPI的Google地图中放置10,000,000个标记或折线[关闭]【英文标题】：HowtoPlace10,000,000MarkerorPolyLineInGoogleMapsForJavaScriptAPI[closed]【发布时间】：2021-11-0109:41:01【问题描述】：我想向用户显示10,000,000个位置数据（电信数据... 查看详情
google地图的javascript十进制到度
Whenyoushowthecoordinatesofapoint,it’ssometimesbettertoshowthemasdegreesandnotasdeciaml(evenifdecimalissimpler).Eachofthetwocoordinatescanbeconvertedwiththesamefunction.Inthefunctioncallthe“tipo†查看详情
IBM Worklight - 如何使用 Google 地图 API
...位置？还有如何让应用始终实时跟踪用户位置？这是我的JavaScript：varx=docum 查看详情
Google Maps JavaScript API 在同一张地图上显示两条不同折线样式的路线
】GoogleMapsJavaScriptAPI在同一张地图上显示两条不同折线样式的路线【英文标题】：GoogleMapsJavaScriptAPIDisplayTwoRouteswithDifferentPolylineStylesonsameMap【发布时间】：2016-07-2823:29:22【问题描述】：我正在使用GoogleMapsJavaScriptAPI，并希望在同... 查看详情
Javascript/Google 地图，自动创建的组合框在第二次迭代中失败
】Javascript/Google地图，自动创建的组合框在第二次迭代中失败【英文标题】：Javascript/GoogleMaps,autocreatedcomboboxfailingonseconditeration【发布时间】：2010-10-0404:46:59【问题描述】：我对Javascript和GoogleMapsAPI还是很陌生。我在用标记填充的... 查看详情
通过 Javascript 异步加载谷歌地图的问题
】通过Javascript异步加载谷歌地图的问题【英文标题】：ProblemswithasynchronouslyloadingGoogleMapviaJavascript【发布时间】：2014-07-1313:37:03【问题描述】：我正在尝试异步生成Google地图。那里有很多示例，但找到的示例使用global(?)函数来展... 查看详情
使用Javascript在谷歌地图上的多个标记之间画线
】使用Javascript在谷歌地图上的多个标记之间画线【英文标题】：DrawLinesbetweenMultiplemarkersonGoogleMapusingJavaScript【发布时间】：2019-01-1920:30:38【问题描述】：我正在尝试在Google地图上的多个标记之间画线。多个标记的绘图是成功的... 查看详情