How To Embed Google Map Using Bootstrap?

I want to add a map into 'map & direction' of my contact page. i am trying google map embed procedure step by step but it didn't work the is i can't view the map. i am using bo

Solution 1:

Kudos to @ymakux comment "It's better to use built-in classes " I have been trawling SO for ages looking to get a Google Map to neatly fit into a bootstrap div and your answer is perfect! So for a newbie like me using maps with Bopotstrap utilizing the sample code supplied by google at https://developers.google.com/maps/documentation/javascript/geolocation

Add divs as suggested by @ymakux just prior to map div similar to this:

<divclass="embed-responsive embed-responsive-4by3"><divid="map-container"class="embed-responsive-item"><divid="map"></div></div></div>`

Solution 2:

Try this code its working fine for bootstrap

functioninitialize() {
            var mapOptions = {
                center: new google.maps.LatLng(28.1823294, -82.352912),
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                scrollwheel: false,
                draggable: false,
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true,
                rotateControl: true,
            };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        }
google.maps.event.addDomListener(window, 'load', initialize);

#contactform.btn:hover {
  background: rgba(9,8,77,0.7);
}

#map-canvas {
  width: 100%;
  height: 300px;
  margin-bottom: 15px;
  border: 2px solid #fff;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><divid="map-canvas"></div><!--Google Maps API--><scripttype="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&amp;sensor=true"></script>

Please use correct API for google map, You get it from google map console.

Solution 3:

Your bootstrap elements are preventing your map from displaying.

<div><divstyle="border: 1px solid red;"><h4class="h4">Find Us at Google Map</h4></div><divid="map-container"><scriptsrc="http://maps.google.com/maps/api/js?sensor=false"></script></div></div>

A little CSS

#map-container{
    height: 500px;
    width: 500px;
}

Your map will display with that.

I would also not place your map calls in your HEAD tag. Let the page load, then have the maps load.

Once you get your map showing, slowly add in bootstrap components, as they can do some weird things with Google maps. Especially with grid layout. If you leave the grid layout on and you can not see the map, resize your browser (clicking the corner and dragging it) and you should be able to hit the sweet spot to display the map.