0

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><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>

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]https://i.stack.imgur.com/P8nbN.png "screenshot"

Cheers.

1
  • The solution for that unfortunately didn't work, he seems to be asking for something different than I am.
    – user5654245
    Feb 12, 2016 at 23:26

1 Answer 1

2

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);
5
  • OkayI will give this a go, but how do I set a location for those maps in the code?
    – user5654245
    Feb 13, 2016 at 0:48
  • @mEthoxE Look in the first JavaScript lines. You provide Latitude and Longitude coordinates for each map :). Feb 13, 2016 at 0:49
  • Hi I'm attempting the code now, but my page is just blank? I created the divs in the HTML, and put the script in the head and set <body onload="initialize()"> Any ideas?
    – user5654245
    Feb 13, 2016 at 0:52
  • The JSFiddle provided by me works perfectly. Can you show your code? Feb 13, 2016 at 0:55
  • Hi Ariel, I'll get back to you tonight with my code. Thanks
    – user5654245
    Feb 15, 2016 at 9:12