<分区>
<分区>
我正在开发一个联系页面，但在显示两个相邻的谷歌地图框时遇到了一些问题。我从 Google 开发者网站获得了代码。
HTML 和 CSS:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:440px;width:550px;'><div id='gmap_canvas' style='height:440px;width:550px;'></div><div><small><a href="http://embedgooglemaps.com"> embed google map </a></small></div><div><small><a href="https:/www.googlemapsgenerator.com/">generate Google Maps</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(50.85191589999999,0.5627325000000383),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(50.85191589999999,0.5627325000000383)});infowindow = new google.maps.InfoWindow({content:'<strong>1066 Kung Fu School</strong><br>26 Grand Parade, St Leonards on Sea<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:440px;width:550px;'><div id='gmap_canvas' style='height:440px;width:550px;'></div><div><small><a href="http://embedgooglemaps.com"> embed google map </a></small></div><div><small><a href="http://googlemapsgenerator.com">googlemapsgenerator.com</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(50.85191589999999,0.5627325000000383),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(50.85191589999999,0.5627325000000383)});infowindow = new google.maps.InfoWindow({content:'<strong> St Mary Magdalene’s Hall</strong><br>Magdalene Road, Bexhill on Sea<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
如果很难看到 CSS(内联)样式:
max-width:none!important;background:none!important;float:left!important;
max-width:none!important;background:none!important;float: right!important;
它的外观和我需要的截图:
[1] http://i.imgur.com/JmO3d4Z.png “截图”
干杯。
最佳答案
请看这个 JSFiddle - Two maps on the same page .
请注意他是如何创建两个 div，对它们进行内联样式化，并分别执行应用于 div 的 JavaScript 工作(而不是您提供的示例)。
<div id="map_canvas" style="top: 10px; left: 25px; width:210px; height:220px; float: left"></div>
<div id="map_canvas_2" style="top: 10px; left: 75px; width:210px; height:220px"></div>
然后，使用 JS:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
关于html - 将两个谷歌地图框架彼此相邻定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35373771/