Geek Answers Handbook

How to insert google map using bootstrap?

I want to add a map to the "map and direction" of my contact page. I am trying to follow the procedure for embedding a google map step by step, but it doesn’t work, I can’t view the map. I am using bootstrap.

Here is my mark:

    <head>
      <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>
      <script>
    $(document).ready(function() {

        var myCenter=new google.maps.LatLng(45.992261, -123.925014);
        var marker=new google.maps.Marker({
            position:myCenter
        });

        function initialize() {
          var mapProp = {
              center:myCenter,
              zoom: 14,
              draggable: false,
              scrollwheel: false,
              mapTypeId:google.maps.MapTypeId.ROADMAP
          };

          var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
          marker.setMap(map);

          google.maps.event.addListener(marker, 'click', function() {

            infowindow.setContent(contentString);
            infowindow.open(map, marker);

          }); 
        };

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            initialize();
        });

    });
    </script>
   <style type="text/css">
        #map-canvas {
            height:500px;
         }
    </style>
  <head>
    <div class="tab-content">
        <div class="tab-pane fade" id="map">
            <div class="col-md-5">
                <h4 class="h4">Find Us at Google Map</h4>               
            </div>
            <div id="map-canvas" class="col-md-7">
            </div>
        </div>
    </div>
+4
source share
3 answers

Try using this code to work on loading

function initialize() {
            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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
            
<div id="map-canvas"></div>
    
<!--Google Maps API-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&amp;sensor=true"></script>
Run code
+4
source

@ymakux " ". SO , Google, -div, ! , , , Bopotstrap, , google https://developers.google.com/maps/documentation/javascript/geolocation

divs, @ymakux div div, :

<div class="embed-responsive embed-responsive-4by3">
<div id="map-container" class="embed-responsive-item">
<div id="map">
</div>
</div> 
</div>`
+2

.

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

CSS

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

.

HEAD. , .

Once you get your map displayed, slowly add bootstrap components, as they can do some weird things with Google maps. Especially with the layout of the grid. If you leave the grid layout and you don’t see the map, change the size of your browser (by clicking on the corner and dragging it), and you can go to a sweet place to display the map.

-1
source

More articles:


All Articles