Twitter Bootstrap Question posted in

Unable to load Google map – Twitter bootstrap

Google Map not loading.
only blank div is displaying

here my code snippet

<div id="map-container" class="col-md-9 col-sm-12">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>                                 
        function init_map() {
            var var_location = new google.maps.LatLng(35.710107,73.039610);                              
            var var_mapoptions = { center: var_location, zoom:17 };                              
            var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});                              
            var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);                                 
            var_marker.setMap(var_map); 
        }                            
        google.maps.event.addDomListener(window, 'load', init_map);                              
    </script>
</div>

i think my logic is right. can anyone help me to figure it out what the problem is.

Thnx in advance. . . !

Tags:

2

Answers


  1. 0 
    <div class="col-md-9 col-sm-12">
    <div id="map-container" style="width: 100%; height:400px;"></div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>                                 
        function init_map() {
            var var_location = new google.maps.LatLng(35.710107,73.039610);                              
            var var_mapoptions = { center: var_location, zoom:17 };                              
            var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});                              
            var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);                                 
            var_marker.setMap(var_map); 
        }                            
        google.maps.event.addDomListener(window, 'load', init_map);                              
    </script>
</div>

    You need to create another div for the map container and add the width & height for this.

    Login or Signup to reply.
  2. 0

    First of all, you need an API Key, which you don’t seem to have.

    then basically just follow the google maps api tutorial, like you seem to have sorta been doing.

    <style>
  #map {
    height: 400px;
    width: 400px;
  }
</style>
<div id="map"></div>
<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

    (https://developers.google.com/maps/documentation/javascript/examples/map-simple)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search