Ciao a tutti,
sto assemblando vari script di google maps per ottenere una mappa che si geolocalizzi nella posizione del browser al suo caricamento, che abbia la ricerca con autocompletamento e riposizionamento per chi ha la geolocalizzazione disattivata e che carichi dei markers .
Le tre cose separatamente le sono riuscite a fare partendo anche da questo tutorail proprio di google
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
Sono anche riuscito a mettere la geolocalizzazione, ma non riesco poi ad aggiungere dei markers che vado a prendere tramite ajax.
Anche questa cosa l'ho fatta ma in un'altra pagina dove creo solo i markers dopo aver fato la geolocalizzazione.
Quando ho cercato di mettere il tutto sull'esempio di google non mi va, ovvero non ho errore, ho anche messo degli alert per vedere se tutto man mano viene richiamato ma quello che non fa è aggiungere i markers.
Io credo che sostanzialmente o richiamo nel posto sbagliato la mia funzione per creare i markers o questi vengono a loro volta poi cancellati
Di seguito vi posto tutto il mi codice
di base definisco latAttuale e lonAttuale che poi passo alla mia funzione ajax per richiamare dei markres nelle vicinanze
la funzione initMap mi crea tutta la mappa con sopra l'input per fare la localizzazione a mano
all'intero di initMap richiamo la geolocaizzazione per centrare la mappa
dopo di che vado a richiamare caricaDati che mi crea i markers
come detto sia con degli alert sia con Fiddler ho visto che la funzione dei markers caricaDati va, ma poi non si aggiungono alla mappa
Potete darmi qualche suggerimento .
Grazie
var markers = [];
var map;
var latAttuale = 45.4654219; //0;
var lonAttuale = 9.18592430000001; // 0;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = /** @type {!HTMLInputElement} */(
document.getElementById('pac-input'));
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var infoWindow = new google.maps.InfoWindow({ map: map });
//////////////////
/// qui faccio la geolocalizzazione del browser
/////////////////
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
latAttuale = position.coords.latitude;
lonAttuale = position.coords.longitude;
// alert("posizione attuale " +position.coords.longitude + ' --- ' + position.coords.latitude);
infoWindow.setPosition(pos);
//////////////////
///qui richiamo la funzione per caricare i markers
//////////////////////
caricaDati();
infoWindow.setContent('Tu sei qui.');
map.setCenter(pos);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** @type {google.maps.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(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
radioButton.addEventListener('click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-address', ['address']);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
//
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
function caricaDati() {
//richiamo le coordinate sul server passando la posizione attuale
// alert("carico" + latAttuale + ' ' + lonAttuale)
$.ajax({
//chiamata di tipo POST
type: "POST",
//indirizzo composto dal nome della pagina piu il nome del metodo
url: "/DatiMappa.asmx/GetPuntiPerCoordinateArrayDinamic",
//tipo dati json
contentType: "application/json; charset=utf-8",
dataType: "json",
//passo i parametri post
data: "{'posizione':{'Lat':" + latAttuale + ",'Lon':" + lonAttuale + "}}",
cache: false,
success: function (result) { impostaMarkers(result.d); alert(result.d); },
failure: function (error) { alert(error.d); }
});
}
function impostaMarkers(coordinate) {
//alert(coordinate);
//cancello i vecchi markers
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
//itero tutte le coordinate ricevute
var latLon;
var image1 = 'images/map_pointers_ombra.png';
$.each(coordinate, function (index, item) {
//creo il marker a partire dalla coordinata restituita
latLon = new google.maps.LatLng(item.Lat, item.Lon);
var marker = new google.maps.Marker({
position: latLon,
type: 'info',
map: map,
title: item.Titolo,
icon: image1
});
markers.push(marker);
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(item.Titolo);
infoWindow.open(map, marker);
});
//solo per test: sposto la posizione all'ultima coordinata ricevuta
lat = item.Lat;
lon = item.Lon;
});
}
</script>