Ciao a tutti,
ho seguito vari tutorial e script online (in primis quelli del developper di google), ma c'è una cosa che non riesco a fare e vi chiedo aiuto, per capire intanto se non è permesso dalle api di google maps o se sbaglio io qualcosa negli script.
Quello che vorrei fare è aver un form dove ho il campo di inserimento dell'indirizzo e di seguito la mappa.
Quando si digita il campo nell'indirizzo ho inserito l'autocompletamento che a sua volta oltre a darmi l'indirizzo mi ritorna nei campi hidden tutti i valori riguardanti l'indirizzo come coordinate,regione, stato...ecc...ecc...
Per fare questo ho scritto questo
$(function () {
$("#geocomplete2").geocomplete({
map: "#map-canvas",
details: "#formInsert"
});
});
</script>
fino a qui tutto ok
ma il problema ce l'ho se inserisco un tasto per identificare la propria posizione e quindi non scrivere il proprio indirizzo, o se richiamo la funzione con un onload.
Ho due problemi, il primo che identifica la mia posizione sulla mappa ma non riesco ad avere le coordinate e gli altri dati (non riesco a richiamare in qualche modo il completamento del form) il secondo problema e che dopo il posizionamento automatico (o con tasto per richiamarlo) il geocomplite precedente non va più, ovvero mi riempie il form ma non mi sposta il cursore sulla mappa.
Vi allego tutto il codice html che ho fatto, magari qualcuno mi da qualche suggerimento.
Se qualcuno ha un link per mostrarmi già un tutorial/script su questo sono dispostissimo a rifare tutto.
Grazie
codice:
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<style type="text/css">
#map-canvas { height: 400px }
</style>
<script type="text/javascript">
var map;
var infowindow;
var userMarker;
var geocoder;
function drawMap(p_lat, p_long, p_zoom) {
var mapOptions = {
center: new google.maps.LatLng(p_lat,p_long),
zoom: p_zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
geocoder = geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function(event) {
if ( ! document.getElementById("gobutton").disabled ) {
if ( infowindow ) infowindow.close();
infowindow = null;
userMarker.setClickable(false);
userMarker.setPosition(event.latLng);
var myLatLng = event.latLng;
var lat11 = myLatLng.lat();
var lng11 = myLatLng.lng()
//alert(lat11 +","+ lng11)
document.getElementById("coordinate").value= lat11 + "," + lng11
geocode();
}
});
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showWorld);
}
else{
document.getElementById("map-canvas").innerHTML="Geolocation is not supported by this browser.";
}
}
function goforGeocoding(enable) {
document.getElementById("gobutton").disabled = !enable;
}
function showPosition(location) { //geolocalizzazione riuscita
drawMap(location.coords.latitude, location.coords.longitude, 10);
userMarker = new google.maps.Marker({
position: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
map: map,
title:"Voi siete qui!"
});
var contentString = "<b>Salve!</b><br/>La tua posizione è:<br/>" +
'Latitudine : ' + location.coords.latitude + "<br/>" +
'Longitudine: ' + location.coords.longitude + "<br/>" +
'Con un errore di metri: ' + location.coords.accuracy + "<br/>" +
'Altitudine : ' + location.coords.altitude + "<br/>" +
'Con un errore di metri: ' + location.coords.altitudeAccuracy + "<br/>";
document.getElementById("coordinate").value=location.coords.latitude + "," +location.coords.longitude
infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(userMarker, 'click', function() {
infowindow.open(map,userMarker);
});
geocode();
}
function geocode() {
goforGeocoding(false);
geocoder.geocode({
latLng: userMarker.getPosition(),
bounds: map.getBounds()
}, showAddress);
}
function resolve() {
if ( document.getElementById("address").value.length == 0 ) {
alert("Digitare un indirizzo");
return;
}
goforGeocoding(false);
geocoder.geocode({
address: document.getElementById("address").value,
bounds: map.getBounds()
}, showMarker);
}
function showMarker(results,status) {
goforGeocoding(true);
if ( status == google.maps.GeocoderStatus.OK ) {
map.setCenter(results[0].geometry.location);
map.setZoom(10);
document.getElementById("coordinate").value=results[0].geometry.formatted_address
if( ! userMarker ) {
userMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
infowindow = new google.maps.InfoWindow({
content: "Coordinate: " + results[0].geometry.location
});
google.maps.event.addListener(userMarker, 'click', function() {
infowindow.open(map,userMarker);
});
} else {
infowindow.setContent("Coordinate: " + results[0].geometry.location);
userMarker.setPosition(results[0].geometry.location);
}
} else if (result == google.maps.GeocoderStatus.UNKNOWN_ERROR) {
alert("Errore nella richiesta a Google, si consiglia di ricaricare la pagina");
} else if (result == google.maps.GeocoderStatus.ZERO_RESULTS) {
alert("Nessun risultato trovato.");
}
else {
alert("Errore: " + status);
}
}
function showAddress(results, status) {
goforGeocoding(true);
if ( status == google.maps.GeocoderStatus.OK ) {
alert("ok");
alert(results[0].address_components[0].long_name);
document.getElementById("address").value = results[0].formatted_address;
//
} else if (result == google.maps.GeocoderStatus.UNKNOWN_ERROR) {
alert("Errore nella richiesta a Google, si consiglia di ricaricare la pagina");
} else if (result == google.maps.GeocoderStatus.ZERO_RESULTS) {
alert("Nessun risultato trovato.");
}
else {
alert("Errore: " + status);
}
}
function showWorld(error) {
drawMap(0, 0, 1); //tutto il mondo
}
function loadMapAPI() {
geolocate()
}
</script>
</head>
<body oooonload="loadMapAPI();">
<form id="formInsert" name="formInsert" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />
<input id="geocomplete2" name="localita" class="form-control" type="search" placeholder="Indirizzo" value="" onclick="this.value='';" style="border: #CCC solid 1px;" AUTOCOMPLETE="Off" />
<input name="lat" id="lat2" type="text" value="">
<input name="lng" id="lng2" type="text" value="">
<input name="formatted_address" id="formatted_address" type="text" value="">
<input name="administrative_area_level_1" id="administrative_area_level_1" type="text" value="">
<input name="administrative_area_level_2" id="administrative_area_level_2" type="text" value="">
<input name="country" id="country" type="text" value="">
<input name="locality" id="locality" type="text" value="">
<input name="street_address" id="street_address" type="text" value="">
<input name="route" id="route" type="text" value="">
<input name="location" id="location" type="text" value="">
<asp:TextBox ID="Nome" runat="server" ></asp:TextBox>
<asp:TextBox ID="Email" runat="server"></asp:TextBox>
<asp:TextBox ID="Descrizione" runat="server" Rows="5"></asp:TextBox>
<!-- <a href="#" class="button" id="gobutton" onclick="resolve()">Cerca sulla mappa</a>-->
<asp:Button ID="BtnSubmit" runat="server" Text="Invia Fuoss" OnClick="BtnSubmit_Click" />
<input type="button" value="Localizate your position" onclick="loadMapAPI()" />
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=ho levato la mia chiave"></script>
<script src="/js/jquery.geocomplete.js"></script>
<script>
$(function () {
$("#geocomplete2").geocomplete({
map: "#map-canvas",
details: "#formInsert"
});
});
</script>