jipe_app/app/views/public/specific_maps/cirques.html.haml
2017-08-14 10:53:30 +02:00

118 lines
3.4 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

=raw "</div>"
.specific_map
-img_url = "/cirques.jpg"
.article_top{:style => "background-image:url('#{img_url}');height:480px;position:relative", :class => ("with_img")}
%h1{:style => "position:absolute;bottom:20px;left:10px;right:10px;"}
-@facebook_img = img_url
-@title = "Carte des communes qui ont déjà fait le choix de l'éthique !"
-@description = "Découvrez les communes qui ont fait le choix de léthique en refusant les cirques avec animaux !"
%h1{:style => "text-align:center;font-size:1.8em;padding-top:1em;"}
Carte des communes qui ont déjà fait le choix de l'éthique !
.center{:style => "max-width:700px;padding-bottom:30px;text-align:center;"}
%p
Découvrez les communes qui ont fait le choix de léthique en refusant les cirques avec animaux !
%p
Et pour en inciter un plus grand nombre à suivre cet exemple, voici
=link_to "la marche à suivre", "https://jipe.fr/fr/cirques-les-bons-reflexes.html", :target => "_blank"
%br
quand un cirque est annoncé en ville…
.map_container
#map{:style => "height:500px;width:100%;"}
.clear
:javascript
function toggleBounce() {
$.ajax("/public/specific_map_items/"+this.customInfo);
}
:javascript
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
'zoom': 2,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
"scrollwheel": false,
};
var map = new google.maps.Map(document.getElementById("map"), options);
var infowindow = null;
var markers = [];
var arrmarkers = [];
infowindow = new google.maps.InfoWindow({
content: "..."
});
-@specific_map.specific_map_items.each do |specific_map_item|
-if specific_map_item.g_latitude
%script
="var lat = "+specific_map_item.g_latitude.to_s+";"
="var lng = "+specific_map_item.g_longitude.to_s+";"
="var marker_id = '#{specific_map_item.id}';"
="var content = '#{specific_map_item.city}';"
:javascript
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
'position': latLng,
customInfo : marker_id,
map : map,
title: content
});
markers.push(marker);
arrmarkers[marker_id] = marker;
google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(this.title);
infowindow.open(map, this);
});
:javascript
//var markerCluster = new MarkerClusterer(map, markers, { maxZoom: 7});
:javascript
var bounds1 = new google.maps.LatLng(41.3423276, -5.14214190000007);
var bounds2 = new google.maps.LatLng(51.0891658, 9.55979339999999);
var bounds = new google.maps.LatLngBounds(bounds1, bounds2);
var map_center = new google.maps.LatLng(46.227638, 2.213749000000007);
map.setCenter(map_center);
map.fitBounds(bounds);
.center{:style => "padding:30px 10px;text-align:center;"}
%h2 La liste des communes :
%p
-c = []
-@specific_map.specific_map_items.order(:city).each do |specific_map_item|
-c << specific_map_item.city
=c.join(", ")
=raw "<div class='main_container'>"