google maps integrato con il sito web

[giusers]

sicuramente integrare google maps con la proprie coordinate in un sito web è possibile...ma è possibile tramite un form sul sito di modo che un utente scriva la sua via e va a comparire automaticamente la sua posizione sulla mappa?

[OoZic]

si se usi jQuery è relativamente semplice:

function searchAddress() {
var a = $('#search-box').val(),
b = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(a) + '&sensor=false&key=';
$.get(b, function(a) {
POI.lat = a.results[0].geometry.location.lat;
POI.lng = a.results[0].geometry.location.lng;
mapsmall = new google.maps.Map(document.getElementById('map-small'), mapOptions2);
mapOptions2.center = new google.maps.LatLng(POI.lat, POI.lng);
mapSmall = new google.maps.Map(document.getElementById('map-small'), mapOptions2);
new google.maps.Marker({
position: new google.maps.LatLng(POI.lat, POI.lng),
map: mapSmall
});
});
}



Ti serve una API key valida e la puoi ottenere gratuitamente con un account Google.
Hai tipo x mila request al giorno da poter fare, dovrebbero essere sufficienti per un utilizzo standard.

PS: dimenticavo, in quel codice io uso mapsmall e mapOptions2 , ovviamente dovrai usare il nome che hai dato alla tua mappa ed eventuale oggetto con la config

[giusers]

si ma una volta messa la mappa e questo script..metto la mappa nell' id map-small, nell' id search-box c'è scritta la via dell' utente...la api dove la devo mettere?

[OoZic]

si ma una volta messa la mappa e questo script..metto la mappa nell' id map-small, nell' id search-box c'è scritta la via dell' utente...la api dove la devo mettere?


b = ... '&sensor=false&key=QUI';

[giusers]

è tipo una roba del genere giusto? 000ec0ca8ca0c2eb00015d0027aaa0040e79c0f0

Pensavo era piu facile:mc: ho messo tutto come ho scritto ma non funziona si vede solamente la mappa ma come faccio a far visualizzare precisamente una via?

[OoZic]

console.log() è tuo amico :D

[airon]

Ma più che altro. E' di una banalità estrema. Ci sono esempi delle api dappertutto.

Posta il codice e verifichiamo cosa non va.

[giusers]

<script>
function searchAddress() {
var a = $('#search-box').val(),
b = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(a)
+ '&sensor=false&key=700ec0ca8cf7c2eb90000d6800ecd8000e79c0f0';
$.get(b, function(a) {
POI.lat = a.results[0].geometry.location.lat;
POI.lng = a.results[0].geometry.location.lng;
mapsmall = new google.maps.Map(document.getElementById('dettagli_mappa'), mapOptions2);
mapOptions2.center = new google.maps.LatLng(POI.lat, POI.lng);
mapSmall = new google.maps.Map(document.getElementById('dettagli_mappa'), mapOptions2);
new google.maps.Marker({
position: new google.maps.LatLng(POI.lat, POI.lng),
map: mapSmall
});
});
}</script>
<div id="dettagli_mappa"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6139400.007323358!2d12.57361079999999!3d41.29246004999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItalia!5e0!3m2!1sit!2s!4v1399466746496" width="800" height="800" frameborder="0" style="border:0"></iframe></div>


Quanti casini ho fatto?:eek:

[OoZic]

1) Cosa ti riporta la console del tuo browser? Impara a leggere la console, ti riporta gli errori e ti permette di capire cosa non funziona. (consiglio Chrome)

2) Non puoi fare operazioni su una mappa caricata con iFrame.
Devi caricare la mappa tramite Javascript API:
https://developers.google.com/maps/documentation/javascript/?hl=it

3) Nel tuo codice non vedo nessun input con id="search-box" quindi il selettore jQuery $('#search-box') non fa riferimento a nulla, stando al codice postato.

4) Non vedo dichiarata da nessuna parte la variabile mapOptions2 e di conseguenza il contenuto

5) Usa JSFiddle ti semplifica la vita a te e a chi vuole aiutarti. Parti pure da questo dove ho già incluso il js di google maps: http://jsfiddle.net/urmK9/1/

6) Un ripasso (o per meglio dire STUDIO) di javascript potrebbe tornarti utile, fin che copi&incolli codice "a caso" la vedo dura capire e migliorare :D
http://www.codecademy.com/tracks/javascript

ci vuole pazienza e voglia di imparare of course ;)

PS: non so se l'hai fatto di proposito ma quella api key non è valida, se è un errore di battitura LASCIALA COSI e non postare MAI la tua api key, se l'hai fatto di proposito come non detto, good job :)

[giusers]

no la api l' ho fatto apposta a non metterla giusta...No non fa per me studiare proprio da zero, preferisco imparare su degli script gia fatti che poi adatto e modifico, tra l' altro html,css che sono linguaggi sicuramente piu semplici, non sapevo nulla ho imparato da un template gia fatto e modificavo a piacimento, cosi' ho imparato! :) :D

[OoZic]

non so quanto tu possa "imparare" così facendo però ... :)