{% extends "pylucid/css_anchor_div.html" %}

{% block plugin_content %}
{% extrahead %}
<!-- GoogleMaps.html extrahead START -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
   google.load("maps", "3",  {other_params:"sensor=false"});

function draw_google_map(map_slug, map_lon, map_lat, map_zoom, marker_html, marker_lon, marker_lat, marker_width, marker_height, map_kmlurl){
    var latlng = new google.maps.LatLng(map_lat, map_lon);
    var myOptions = {
      zoom: map_zoom,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("google_map_"+map_slug), myOptions);

    if ( marker_lat != 10000 && marker_lon != 10000)
    {
        var markerLatlng = new google.maps.LatLng(marker_lat, marker_lon);
        var marker = new google.maps.Marker({
             position: markerLatlng,
             title:marker_html
         });
        marker.setMap(map); 
    }
    var kmlLayer = new google.maps.KmlLayer(map_kmlurl);
    kmlLayer.setMap(map);
}

</script>
<!-- GoogleMaps.html extrahead END -->
{% endextrahead %}
<div id="google_map_{{map.name}}" class="google_map" style="width: {{ map.width }}; height: {{ map.height }};">
    <noscript><h3 class="no_anchor">Error: Javascript is needed.</h3></noscript>
</div>
{% include "StreetMap/includes/edit_link.html" %}
{% include "StreetMap/includes/GoogleMaps_link.html" %}
<script type="text/javascript">
    marker_html = "{{ marker_html }}";
</script>
<script type="text/javascript">
    try {marker_html} catch (e) {
        log("Wrong marker html code!");
        marker_html="";
    }
    draw_google_map("{{ map.name }}", {{ map.lon }}, {{ map.lat }}, {{ map.zoom }}, marker_html, {{ marker_lon }}, {{ marker_lat }}, {{ map.marker_width }}, {{ map.marker_height }}, "{{ map.kmlurl }}");
      
</script>
{% endblock %}
