Question

我正在开发一个联系页面，并且在显示两个彼此相邻的谷歌地图框架时遇到一些问题。我从Google开发者网站获得了代码。

HTML＆amp; 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“截图”

干杯。

Answer 1

请看这个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);

将两个Google Map框架彼此相邻放置

1 个答案: