{% load i18n sekizai_tags %}
{% addtoblock "js" %}<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
//<![CDATA[
(function () {
	// save settings form plugin
	var container = 'google-map-{{ object.id }}';
	var latlng = new google.maps.LatLng('46.94708', '7.445975'); // default to switzerland

	var title = "{{ object.get_title }}";
	var address = "{{ object.address }}, {{ object.zipcode }} {{ object.city }}";

	var options = {
		zoom: {{ object.get_zoom_level }},
		mapTypeId: google.maps.MapTypeId.ROADMAP /* ROADMAP, SATELLITE, HYBRID or TERRAIN */
	};

{% if object.get_lat_lng %}
	// load latlng from given lat lng settings
	latlng = new google.maps.LatLng({{ object.get_lat_lng|join:", " }});
	initGoogleMaps(latlng);
{% else %}
	// load latlng from given address
	var geocoder = new google.maps.Geocoder();
		geocoder.geocode({'address': address}, function (results, status) {
			// check if address can be found if not show default (var latlng)
			if(status == google.maps.GeocoderStatus.OK) latlng = results[0].geometry.location;
			initGoogleMaps(latlng);
		});
{% endif %}

	// initialize google maps
	function initGoogleMaps(latlng) {
		// overwrite options
		options.center = latlng;
		// initialize google map
		var map = new google.maps.Map(document.getElementById(container), options);
		// create marker
		var marker = new google.maps.Marker({
			'position': options.center, 
			'map': map,
			'title': title
		});
		// prepare info window
		var infowindow = new google.maps.InfoWindow({
			content: "<strong>" + title + "<\/strong><br />" + address {% ifnotequal map.get_content "" %} + "<br /><br /><em>{{ object.get_content }}<\/em>"{% endifnotequal %}
		});
		// show info window
		infowindow.open(map, marker);
	}
})();
//]]>
</script>
{% endaddtoblock %}

{% addtoblock "css" %}
<style type="text/css">
<!--
	.google-map-container { width:100%; height:400px; }
-->
</style>
{% endaddtoblock %}

<div class="plugin_googlemap">
	{% if object.get_title %}<h2>{{ object.get_title }}</h2>{% endif %}
	
	<!--  ATTENTION: set a height for this div in CSS -->
	<div id="google-map-{{ object.id }}" class="google-map-container"></div>

	{% if object.route_planer %}
	<form action="http://maps.google.com/" method="get" class="frm google-map-routeplaner">
		<fieldset>
			<h3 class="nospace">{{ object.route_planer_title }}:</h3>
			<p>
				<label for="saddr-{{ object.id }}">{% trans "Your address: " %}</label>
				<input type="text" id="saddr-{{ object.id }}" name="saddr" class="input_text" />
				<span class="btn"><input type="submit" value="{% trans 'Calculate route' %}" /></span>
				<input type="hidden" name="daddr" value="{{ object.address }}, {{ object.zipcode }} {{ object.city }}" />
			</p>
		</fieldset>
	</form>
	{% endif %}
</div>