Skip to content
GitLab
Commit acd111ed authored by jeje22's avatar jeje22
Browse files

google maps

parent 60bdcf09
Pipeline #3446 skipped
Hide whitespace changes
Inline Side-by-side
ChamPoule/Views/Home/Index.cshtml
View file @ acd111ed
......@@ -42,8 +42,135 @@
</div>
<div id="showRes">
</div>
<div id="info">
<ul>
<li class="blue li1"><img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|0000FF"/>Pool 1</li>
<li class="red li2"><img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FF0000" />Pool2</li>
</ul>
</div>
<div id="info2">
<ul>
<li class="blue">
<ul>
<li class="blue li1"><img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|0000FF" />Pool 1 : Sous-Groupe 1</li>
<li class="cyan li2"><img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|00FFFF" />Pool 1 : Sous-Groupe 2</li>
</ul>
</li>
<li class="red">
<ul>
<li class="red li3"><img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FF0000" />Pool 2 : Sous-Groupe 1</li>
<li class="orange li3"><img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFA900" />Pool 2 : Sous-Groupe 2</li>
</ul>
</li>
</ul>
</div>
<div id="map">
</div>
<script>
var list_ville = [];
list_ville.push({ id: "Toulouse", name: "Toulouse", lat: 43.604652, lng: 1.4442090000000007 });
list_ville.push({ id: "Chambery", name: "Chambéry", lat: 45.564601, lng: 5.917780999999991 });
list_ville.push({ id: "Cergy", name: "Cergy", lat: 49.03561699999999, lng: 2.0603250000000344 });
list_ville.push({ id: "Meudon", name: "Meudon", lat: 48.812995, lng: 2.2384700000000066 });
list_ville.push({ id: "Annecy", name: "Annecy", lat: 45.899247, lng: 6.129383999999959 });
list_ville.push({ id: "Limoges", name: "Limoges", lat: 45.83361900000001, lng: 1.2611050000000432 });
list_ville.push({ id: "Amneville", name: "Amnéville", lat: 49.2599469, lng: 6.142912000000024 });
list_ville.push({ id: "Francais_Volants", name: "8 boulevard de Bercy, Paris", lat: 48.839169, lng: 2.378228799999988 });
list_ville.push({ id: "Clermont", name: "Clermont", lat: 49.376086, lng: 2.414201999999932 });
list_ville.push({ id: "Villard", name: "Villard", lat: 46.215587, lng: 6.4377210000000105 });
list_ville.push({ id: "Asnieres", name: "Asnières", lat: 49.196418, lng: 0.3977190000000519 });
list_ville.push({ id: "Valence", name: "Valence", lat: 44.933393, lng: 4.892360000000053 });
list_ville.push({ id: "Roanne", name: "Roanne", lat: 46.034432, lng: 4.072695000000067 });
list_ville.push({ id: "Evry", name: "Evry", lat: 48.629828, lng: 2.4417819999999892 });
list_ville.push({ id: "Strasbourg", name: "Strasbourg", lat: 48.5734053, lng: 7.752111300000024 });
list_ville.push({ id: "Avignon", name: "Avignon", lat: 43.94931700000001, lng: 4.805527999999981 });
list_ville.push({ id: "Wasquehal", name: "Wasquehal", lat: 50.669276, lng: 3.1307819999999538 });
list_ville.push({ id: "Marseille", name: "Marseille", lat: 43.296482, lng: 5.369779999999992 });
var list_marker = [];
function markers(elem,color)
{
var pos, name;
var ok=false;
for (var i = 0; i < list_ville.length; i++)
{
if(list_ville[i].id===elem)
{
ok = true;
pos = new google.maps.LatLng({ lat: list_ville[i].lat, lng: list_ville[i].lng });
name = list_ville[i].name;
list_marker.push(new google.maps.Marker(
{
position: pos,
map: map,
title: name,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color
}));
break;
}
}
if(!ok)
{
geocoder.geocode({ 'address': elem }, function (results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
if (!results)
{
console.log(results);
console.log(add);
}
else
{
var newAddress = results[0].geometry.location;
pos = new google.maps.LatLng(parseFloat(newAddress.lat()), parseFloat(newAddress.lng()));
list_marker.push(new google.maps.Marker(
{
position: pos,
map: map,
title: add,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + color
}));
}
}
else {
console.log("error " + status);
}
});
}
}
function clean_markers()
{
for(var i=0;i<list_marker.length;i++)
{
list_marker[i].setMap(null);
}
list_marker = [];
}
var map;
var geocoder;
function initMap(list) {
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: 47, lng: 2 },
zoom: 6
});
geocoder = new google.maps.Geocoder();
}
$(document).ready(function () {
$("#formPara").submit(function (event) {
$("#showRes").empty();
......@@ -57,33 +184,95 @@
//console.log(json);
//console.log(json.length);
clean_markers();
for (var i = 0; i < json.length; i++) {
console.log(json[i]);
var str1 = "[";
var p1 = "";
var p3 = "";
//console.log(json[i].ListPoolString1.length);
var color = '0000FF';
for (var j = 0; j < json[i].ListPoolString1.length; j++) {
str1 += "[";
if (j == 1)
{
color = '00FFFF';
}
//console.log(json[i].ListPoolString1[j].length);
for (var k = 0; k < json[i].ListPoolString1[j].length; k++) {
str1 += " " + json[i].ListPoolString1[j][k] + " ";
if(j==0)
p1 += json[i].ListPoolString1[j][k] + ", ";
else
p3 += json[i].ListPoolString1[j][k] + ", ";
markers(json[i].ListPoolString1[j][k], color);
}
str1 += "]";
}
str1 += "]";
var str2 = "[";
var p2 = "";
var p4 = "";
color = 'FF0000';
for (var j = 0; j < json[i].ListPoolString2.length; j++) {
str2 += "[";
if (j == 1)
{
color = 'FFA500';
}
for (var k = 0; k < json[i].ListPoolString2[j].length; k++) {
str2 += " " + json[i].ListPoolString2[j][k] + " ";
if(j==0)
p2 += json[i].ListPoolString2[j][k] + ", ";
else
p4 += json[i].ListPoolString2[j][k] + ", ";
markers(json[i].ListPoolString2[j][k], color);
}
str2 += "]";
}
str2 += "]";
//console.log(str1 + str2);
$("#showRes").append("<p>" + str1 + str2 + "</p>");
$(".li1").empty();
$(".li1").append('<img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|0000FF" />Pool 1 : Sous-Groupe 1');
console.log(p1);
p1 = p1.slice(0, -2);
p2 = p2.slice(0, -2);
if (json[0].ListPoolString1[0].length == 9) {
$("#info2").hide();
$("#info").show();
$(".li2").empty();
$(".li2").append('<img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FF0000" />Pool 1 : Sous-Groupe 2');
$(".li1").append(' : ' + p1);
$(".li2").append(' : ' + p2);
}
else
{
$("#info").hide();
$("#info2").show();
p3 = p3.slice(0, -2);
p4 = p4.slice(0, -2);
$(".li2").empty();
$(".li2").append('<img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|00FFFF" />Pool 1 : Sous-Groupe 2');
$(".li3").empty();
$(".li3").append('<img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FF0000" />Pool 2 : Sous-Groupe 1');
$(".li4").empty();
$(".li4").append('<img src="http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFA900" />Pool 2 : Sous-Groupe 2');
$(".li1").append(' ' + p1);
$(".li2").append(' ' + p2);
$(".li3").append(' ' + p3);
$(".li4").append(' ' + p4);
}
$("#map").show();
}
}
});
});
})
</script>
\ No newline at end of file
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
\ No newline at end of file
ChamPoule/Views/Shared/_Layout.cshtml
View file @ acd111ed
......@@ -7,6 +7,28 @@
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<style type="text/css">
#map {
height: 700px;
}
#info,#info2{
display:none;
}
.blue{
color:blue;
}
.red
{
color:red;
}
.orange{
color:orange;
}
.cyan{
color:cyan;
}
</style>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js"></script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment