Template source: listing/_map.html

{% load staticfiles %}
{% load get_setting %}

{% get_setting "MAP_REGION" as map_region %}
{% get_setting "MAP_API_KEY" as api_key %}
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
</style>

<script type="text/javascript">
  var theMap;
  $('#listing-tabs-map-link').on('click', function (e) {
    if (!$('#listing-tabs-map:visible').length) {
      if (_.isUndefined(theMap)) {
        theMap = new Ribbit.Map({
          $mapCanvasElement: $('#map_canvas'),
          mapOptions: {scrollwheel: false},
          region: "{{ map_region }}",
          triggerEvents: false,
          lat: {{ listing.latitude }},
          lng: {{ listing.longitude }},
          apiKey: "{{ api_key }}",
          deferredCallback: function () {
            this.addMarker({{ listing.latitude }}, {{ listing.longitude }});
          }
        });
      } else {
        theMap.setCenter({{ listing.latitude }}, {{ listing.longitude }});
      }

    }
  });
  $('#listing-tabs-description-link').on('click', function (e) {
    $('#map_canvas').css('visibility', 'hidden');
  });
</script>

<div class="map-wrapper">
    <div id="map_canvas" style="visibility: hidden;"></div>
</div>