1

I am trying to display a google map for a django site. I have a template, roughly,

{% extends "base.html" %}
{% load staticfiles %}

{% block content %}
...
<div class="col-md-6">
   <div id="map_canvas" style="width:100%;height:400px;background-color:#CCC;"></div>
</div>
...
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options);
  }
</script>


{% endblock%}

When I reload the webpage, I can see that a request is being made for Google's map url's , but I see no map, just a plain gray background.

yayu
  • 7,758
  • 17
  • 54
  • 86

2 Answers2

2

i have the same problem in html code I delete <!DOCTYPE html> and it work

slim_chebbi
  • 798
  • 6
  • 9
1

You just need to add the line before closing your script tag: 

google.maps.event.addDomListener(window, 'load', initialize);

You can see it in the Documentation

trnsnt
  • 674
  • 4
  • 15
  • I've added it but I still don't get a map. – yayu Jul 29 '14 at 08:32
  • Have you check the javascript console of your browser to see if you have any errors? Your exemple with the line I have put work fine for me! – trnsnt Jul 29 '14 at 08:45
  • I am getting `Uncaught TypeError: Cannot read property 'offsetWidth' of null main.js:39 ml main.js:39 Tl main.js:45 initialize` – yayu Jul 29 '14 at 08:53
  • You can find similar problem [here](http://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null). And I think you have to update the map creation with var `map = new google.maps.Map(mapCanvas, mapOptions );` – trnsnt Jul 29 '14 at 08:57