3

I am trying to add Google Maps to a web page, however it has a fixed width and height, from the code using Googles tutorial. My HTML in the head is this:

<script src="https://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapCanvas = document.getElementById('map'); var myLatLng = {lat: 51.434408, lng: -2.53531}; var mapOptions = { center: new google.maps.LatLng(51.434408, -2.53531), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello Wold' }); } google.maps.event.addDomListener(window, 'load', initialize); </script>

The HTML in the body is this:

<div id="map"></div>

The CSS thats related is this:

#map { width: 1140px; height: 300px; }

I am using bootstraps column method to layout and make my page responsive, at all sizes I would like the map to take up all 12 columns of the row that it is in. Any ideas?

Thanks!

Improve this question

4 Answers 4

Reset to default
9

So, I found a solution to my question. Here is my revised CSS:

#map { width: 100%; height: 300px; }

I found that you have to have a height of a certain amount of pixels, using 100% or another percentage would make the map disappear, however the width 100% makes the map respond to resizing the browser. The HTML has been left the same.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Have you tried use %?

#map { width: 100%; height: 30%; }

That should work :)

HTML:

<div class="row"> <div class="col-xs-12"> <div id="map"></div> </div> </div>
Improve this answer

5 Comments

That won't work. You'll need to declare 100% width on all parent elements.
Exacty, using bootstrap you can do that. You shouldn't have down vote my answer
@Elow - have you tried it? it is not working because on load the marker is on the middle. after resizing the markers is away or not centered!
@elow i didn't downvote, please go slander someone else.
This hasn't worked, if I use your CSS, then the map disappears!
0

Already this question has discussed in our forum. Have a look at it: Google Maps with Bootstrap not responsive

Use the bootstrap class "span12" it will help you for responsive and include display: block; property for #map id selector.

Improve this answer

2 Comments

col-xs-12 - I doubt he's using bootstrap2.
Yeah, sorry Im using bootstrap 3, I have had a look for this question but it uses old bootstrap and also old google code
0 

.map-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }
<div class="map-responsive"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.