calling javascript function inside div

Question

I am following the Google Map API tutorial here , specifically the JAVASCRIPT + HTML version. I believe the relevant part would be

<body>
    <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
  });
}

I am trying to use bootstrap for the page with two fluid containers, one of which will contain the map. I am following this fluid layout example from Bootstrap. So I have something like

<div class="container-fluid">
  <div class="row-fluid">
<div class="span2">
  {% for q in qs %}
    <p>{{ q.name }} {{ q.address}}</p>
  {% endfor %}
</div>
<div class="span10" id="map"></div>
</div>
</div>

It does not display the map. I am wondering if

<div class="span10" id="map"></div>

is the right thing to do here, and whether I should change anything else.

Edit:

<div id="map"></div> <- This works
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2"></div>
    <div class="span10" id="map"></div> <- This doesn't work
  </div>
</div>

Answer 1

Change

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

with

(function () {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}())

calling javascript function inside div

Question

1 answers

solution1
0 2015-12-23 08:19:23

calling javascript function inside div

Question

1 answers

solution1 0 2015-12-23 08:19:23

solution1
0 2015-12-23 08:19:23