Привет тостер.
Решил прикрутить карту с изображением обьектов добавленых раннее. Использую батарейку
django-easy-maps. Только одна беда, батарейка позволяет выводить лишь один маркер.
{% load easy_maps_tags %}
{% easy_map "Russia, Ekaterinburg, Mira 32" 300 400 %} --- Выводит один маркер
{% easy_map address 200 200 5 using 'map.html' %} --- Хочу это отредактировать!
Хочу отредактировать шаблон map.html.
Вот сам map.html
{% with map.latitude|stringformat:"f" as lat %}
{% with map.longitude|stringformat:"f" as long %}
{% block api_js %}
<!-- Google Maps API javascript -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
{% endblock %}
{% block html %}
<!-- HTML map container -->
<div id="map-canvas-{{ map.pk }}"
{% if width and map.latitude and not map.geocode_error %}
style="width: {{ width }}px; height: {{ height }}px;"
{% endif %}
class="easy-map-googlemap">
{% block noscript %}
<noscript>
<img alt="Map of {{ map.address }}" src="https://maps.google.com/maps/api/staticmap?center={{ lat }},{{ long }}&zoom={{ zoom }}&markers={{ lat }},{{ long }}&size={{ width }}x{{ height }}&sensor=false">
</noscript>
{% endblock noscript %}
{% if map.geocode_error %}<!-- geocoding error -->{% endif %}
</div>
{% endblock %}
{% block map_js %}
<!-- Map creation script -->
<script type="text/javascript">
function initialize_map_{{ map.pk }}() {
var latlng = new google.maps.LatLng({{ lat }}, {{ long }});
var mapElem = document.getElementById("map-canvas-{{ map.pk }}");
{% block map_options_js %}
var mapOptions = {
zoom: {{ zoom }},
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
{% endblock %}
var map = new google.maps.Map(mapElem, mapOptions);
{% block extra_js %}
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "{{ map.address }}"
});
{% endblock %}
}
{% block map_loading_js %}
// initialize the map after page loading
google.maps.event.addDomListener(window, 'load', initialize_map_{{ map.pk }});
{% endblock %}
</script>
{% endblock %}
{% endwith %}
{% endwith %}
Нашел в документации Google Maps вот этот
пример добавления маркеров.
Код с скрипта примера
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(2.8,-187.3),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
// (In this example we use a locally stored copy instead.)
// script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
script.src = 'earthquake_GeoJSONP.js';
document.getElementsByTagName('head')[0].appendChild(script);
}
// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
}
google.maps.event.addDomListener(window, 'load', initialize)
Подскажите как правильно использовать скрипт в map.html чтобы выводить несколько маркеров.
Заранее, всем спасибо!