Positioning two Google Map frames next to each other [duplicate] - html

Question

This question already has answers here:
How to Display Multiple Google Maps per page with API V3
(11 answers)
Closed 7 years ago.
I'm developing a contact page and having a bit of an issue with displaying two google map frames next to each other. I got the code from the Google developer website.
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> embed google map </small></div><div><small>generate Google Maps</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> embed google map </small></div><div><small>googlemapsgenerator.com</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>
In case its hard to see the CSS (its inline) styles:
max-width:none!important;background:none!important;float:left!important;
max-width:none!important;background:none!important;float: right!important;
Screenshot of how it looks and what I need:
[1]http://i.imgur.com/JmO3d4Z.png "screenshot"
Cheers.

Answer 1

Please look at this JSFiddle - Two maps on the same page.
Note how he creates two divs, inline-styling them, and doing the JavaScript work that applies on the divs separately (rather than the example provided by you).
<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>
And then, using JS:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);