235 lines
12 KiB
HTML
235 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Mappa Spacciatori</title>
|
|
<meta charset="ISO-8859-1" />
|
|
<meta name="google" value="notranslate" />
|
|
<meta http-equiv="expires" content="0">
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"/>
|
|
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.controls {
|
|
margin-top: 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 2px 0 0 2px;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
height: 32px;
|
|
outline: none;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
#pac-input {
|
|
background-color: #fff;
|
|
font-family: Roboto;
|
|
font-size: 15px;
|
|
font-weight: 300;
|
|
margin-left: 12px;
|
|
padding: 0 11px 0 13px;
|
|
text-overflow: ellipsis;
|
|
width: 300px;
|
|
}
|
|
#pac-input:focus {
|
|
border-color: #4d90fe;
|
|
}
|
|
|
|
.pac-container {
|
|
font-family: Roboto;
|
|
}
|
|
</style>
|
|
<script>
|
|
var map = undefined;
|
|
|
|
var defaultLatLng = new google.maps.LatLng(45.4654219, 9.1859243); // Default to Milan
|
|
var myMakers = [];
|
|
function _centerControl(controlDiv, map) {
|
|
var self = this;
|
|
// Set CSS for the control border.
|
|
var controlUI = document.createElement('div');
|
|
controlUI.style.backgroundColor = '#fff';
|
|
controlUI.style.border = '2px solid #fff';
|
|
controlUI.style.borderRadius = '3px';
|
|
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
|
|
controlUI.style.cursor = 'pointer';
|
|
controlUI.style.marginTop = '10px';
|
|
controlUI.style.marginLeft = '15px';
|
|
controlUI.style.textAlign = 'center';
|
|
controlUI.title = 'Click to recenter the map';
|
|
controlDiv.appendChild(controlUI);
|
|
|
|
// Set CSS for the control interior.
|
|
var controlText = document.createElement('div');
|
|
controlText.style.color = 'rgb(25,25,25)';
|
|
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
|
|
controlText.style.fontSize = '16px';
|
|
//controlText.style.lineHeight = '32px';
|
|
controlText.style.padding = '4px';
|
|
// controlText.style.paddingRight = '5px';
|
|
controlText.innerHTML = 'Mia Posizione';
|
|
controlUI.appendChild(controlText);
|
|
|
|
// Setup the click event listeners: simply set the map to Chicago.
|
|
controlUI.addEventListener('click', function() {
|
|
if ( navigator.geolocation ) {
|
|
function success(pos) {
|
|
// Location found, show map with these coordinates
|
|
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
|
|
}
|
|
function fail(error) {
|
|
map.setCenter(defaultLatLng); // Failed to find location, show default map
|
|
}
|
|
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
|
|
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
|
|
} else {
|
|
map.setCenter(defaultLatLng); // Failed to find location, show default map
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
function _drawMap(LatLng){
|
|
var myOptions = {
|
|
zoom: 10,
|
|
center: LatLng,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
streetViewControl: false,
|
|
mapTypeControl: false,
|
|
zoomControlOptions: {
|
|
position: google.maps.ControlPosition.RIGHT_CENTER
|
|
},
|
|
};
|
|
$("#map-canvas").width(document.documentElement.clientWidth - 32/*Padding content*/);
|
|
$("#map-canvas").height(document.documentElement.clientHeight - 151 - $('#searchPanel').height());
|
|
map = new google.maps.Map($("#map-canvas")[0], myOptions);
|
|
|
|
// Create the search box and link it to the UI element.
|
|
var input = $("#pac-input")[0];
|
|
var searchBox = new google.maps.places.SearchBox(input);
|
|
self.map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
|
|
var centerControlDiv = document.createElement('div');
|
|
var centerControl = self._centerControl(centerControlDiv, self.map);
|
|
|
|
//centerControlDiv.index = 4;
|
|
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(centerControlDiv);
|
|
var markers = [];
|
|
// [START region_getplaces]
|
|
// Listen for the event fired when the user selects a prediction and retrieve
|
|
// more details for that place.
|
|
searchBox.addListener('places_changed', function() {
|
|
var places = searchBox.getPlaces();
|
|
|
|
if (places.length == 0) {
|
|
return;
|
|
}
|
|
|
|
// Clear out the old markers.
|
|
markers.forEach(function(marker) {
|
|
marker.setMap(null);
|
|
});
|
|
markers = [];
|
|
|
|
// For each place, get the icon, name and location.
|
|
var bounds = new google.maps.LatLngBounds();
|
|
places.forEach(function(place) {
|
|
var icon = {
|
|
url: place.icon,
|
|
size: new google.maps.Size(71, 71),
|
|
origin: new google.maps.Point(0, 0),
|
|
anchor: new google.maps.Point(17, 34),
|
|
scaledSize: new google.maps.Size(25, 25)
|
|
};
|
|
|
|
// Create a marker for each place.
|
|
markers.push(new google.maps.Marker({
|
|
map: self.map,
|
|
icon: icon,
|
|
title: place.name,
|
|
position: place.geometry.location
|
|
}));
|
|
|
|
if (place.geometry.viewport) {
|
|
// Only geocodes have viewport.
|
|
bounds.union(place.geometry.viewport);
|
|
} else {
|
|
bounds.extend(place.geometry.location);
|
|
}
|
|
});
|
|
map.fitBounds(bounds);
|
|
});
|
|
|
|
var iconPM = {
|
|
url: "http://app.gruppolapastamadre.it/icon.png",
|
|
scaledSize: new google.maps.Size(24, 24)
|
|
};
|
|
|
|
self.map.addListener('bounds_changed', function() {
|
|
var bound = map.getBounds();
|
|
searchBox.setBounds(bound);
|
|
var latLngFrom = bound.getNorthEast();
|
|
var latLngTo = bound.getSouthWest();
|
|
$.ajax({
|
|
url: "http://dev.gruppolapastamadre.it/Service/api/spacciatori/bound/" + latLngFrom.lat() + "/"+ latLngFrom.lng() + "/" + latLngTo.lat() + "/"+ latLngTo.lng(),
|
|
//dataType: "json",
|
|
//async: false,
|
|
type: 'GET',
|
|
success: function (resp) {
|
|
resp.forEach(function(ele, index){
|
|
if(!myMakers["|" + ele.Latitudine+ "|" + ele.Longitudine+ "|"])
|
|
{
|
|
var marker = new google.maps.Marker({
|
|
position: new google.maps.LatLng(ele.Latitudine, ele.Longitudine),
|
|
icon: iconPM,
|
|
//label: ele.Name,
|
|
title: ele.Name,
|
|
map: self.map
|
|
});
|
|
myMakers["|" + ele.Latitudine+ "|" + ele.Longitudine+ "|"] = marker;
|
|
var tipopm = "";
|
|
if(ele.TipoPM==1){tipopm = "Pasta Madre Solida"} else if(ele.TipoPM==2){tipopm = 'Li.Co.Li.'}else{tipopm = 'Entrambi'}
|
|
var infowindow = new google.maps.InfoWindow({
|
|
content: '<div id="content"><div id="siteNotice"></div><h3 id="firstHeading" class="firstHeading"> ' + ele.Name + '</h3><div id="bodyContent"><p><i>Località:</i> '+ ele.Indirizzo +'<br><i>Tipo di Lievito:</i> ' + tipopm + '<br><i>Contatta:</i> <a href="mailto:'+ele.Email+'">'+ ele.Email + '</a></p></div></div>'
|
|
});
|
|
|
|
marker.addListener('click', function() {
|
|
infowindow.open(self.map, marker);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
$("#pac-input").show();
|
|
}
|
|
|
|
$( window ).resize( function(){
|
|
$("#map-canvas").width(document.documentElement.clientWidth - 32/*Padding content*/);
|
|
$("#map-canvas").height(document.documentElement.clientHeight - 151 - self.$el.find('#searchPanel').height());
|
|
});
|
|
|
|
if ( navigator.geolocation ) {
|
|
function success(pos) {
|
|
// Location found, show map with these coordinates
|
|
_drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
|
|
}
|
|
function fail(error) {
|
|
_drawMap(defaultLatLng); // Failed to find location, show default map
|
|
}
|
|
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
|
|
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
|
|
} else {
|
|
_drawMap(defaultLatLng); // No geolocation support, show default map
|
|
}
|
|
</script>
|
|
<input id="pac-input" data-role="none" class="controls" type="text" placeholder="Ricerca località..." style="display:none;">
|
|
<div id="map-canvas">
|
|
<!-- map loads here... -->
|
|
</div>
|
|
</body>
|
|
</html> |