CODEWITHSUNDEEP
javascriptjquerygoogle-mapstwitter-bootstrapgoogle-maps-api-3
Parseltongue
Parseltongue

Reputation: 11707

How do I use Twitter Bootstrap with Google Maps v3?

I want to include Twitter Bootstrap's Tabbed Menus within a Google Maps project that is currently coded completely in javascript. Because Twitter relies on jQuery, I'm not sure how to use both of them together.

When I try to import jQuery using this <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> none of my page will render anymore.

I think I might have to use a plugin like jQuery-ui-map, but it would take too long to manually recode the whole site into jQuery (if that's what I have to do). Is there a way to import bootstrap and jquery just for the purposes of the tabbed menu, but leave the rest of the site in javascript?

Upvotes: 0

Views: 2106

Answers (1)

Michael Geary
Michael Geary

Reputation: 28880

When you added the jQuery <script> tag in your test page, you removed the <script> tag that loads your own script. That's why your load() function is undefined.

Your current code is:

<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>

//<![CDATA[

var gmarkers = [];
var infoWindow = new google.maps.InfoWindow;
...

See how there's no <script> tag beginning your own script?

With regard to your question about needing a jQuery plugin to use the Maps API with jQuery, no, you definitely don't need one. I use jQuery and the Maps API together all the time. Consider this: What is a jQuery plugin? JavaScript code! Nothing else. Anything a jQuery plugin does, you can do in your own code.

(I suppose one could imagine that there may be some special bookkeeping that is needed to make jQuery and the Maps API work together, but that just isn't the case. jQuery doesn't care what's inside your map container.)

As @geocodezip mentioned, if you find the map working but odd things happening with the formatting of elements inside the map (e.g. the pan/zoom control gets clipped), check for CSS selectors that affect too many elements, such as:

img {
    /* anything here is dangerous! */
}

A selector like that will affect images inside the map, which should be left alone by your CSS. It doesn't look like you have this problem in your current working test page, just something to be aware of if it happens.

Also, just an unrelated tip, you don't need type="text/javascript" on your <script> tags, nor type="text/css" on your <style> tags.

Upvotes: 3

Related Questions