google map issue with twitter bootstrap

Question

I am using this http://rjshade.github.com/gmaps-autocomplete/ to plugin a map in my website.

I use twitter bootstrap, the modal that the map is viewed in causes the pin to looks buggy (with a shadow and very tiny) and inaccurate when moving it, as well as on loading the pin on the map, the pin isn't centered in the view. once I remove the bootstrap.min.css all these bugs are fixed.

Any ideas how to fix these bugs while having the bootstrap.min.css ?? Thanks alot in advance

Map on load -- enter image description here

Pin -- enter image description here

Can you post a link to your page or create a jsfiddle with your code? — Billy Moat, Aug 23 '12 at 11:33

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

I think the answer might be to add this CSS:

#mapCanvas img {
    max-width: none;
}

More here:

Twitter Bootstrap CSS affecting Google Maps

edited May 23 '17 at 10:24

Community

1
1

answered Aug 23 '12 at 11:35

Billy Moat

20,792
7
45
37

The version of twitter bootstrap(2.1.0), has it done like so by default – Salma Hamed Aug 23 '12 at 11:38
Maybe try adding the above to this element '#gmaps-canvas'? – Billy Moat Aug 23 '12 at 11:46

score 0 · Answer 2 · answered Aug 23 '12 at 13:00

0

I was able to solve the pin problem by changing the id of the map canvas from gmaps-canvas to map_canvas in all the files.

But the problem of loading the map centered is still not fixed.

answered Aug 23 '12 at 13:00

Salma Hamed

2,000
4
26
45

google map issue with twitter bootstrap

2 Answers2