Mappa Personalizzata

[fluxKami]

Salve a tutti.
Ho bisogno di includere in un sito (che devo ancora costruire) una mappa che raffiguri una certa area geografica. Deve avere le seguenti caratteristiche:
• Deve innanzitutto avere un marker che tramite geolocalizzazione evidenzia la posizione dell'utente;
• Devo poter inserire in qualche modo degli altri API che contraddistinguono dei locali/ristoranti in modo che, navigando sulla mappa, l'utente possa trovare un ristorante nelle vicinanze;
• Deve essere zoomabile poiché spesso due o più API saranno talmente vicini da sovrapporsi: l'utente zoomando la mappa potrà cliccare sia uno che sull'altro;
• Clickando su una location di queste inserite, si possano attivare delle funzioni javascript.

Avevo pensato di includere google maps nel sito ma non ho idea di come adattarlo alle esigenze sopra descritte. Cosa consigliate?

[fermat]

ciao!

puoi tutto questo con google maps.
se vuoi qualcosa di più flessibile, puoi usare open street map.

ma se vuoi aggiungere dei punti, li devi salvare da qualche parte (tipo un db per esempio).
e quindi non ti bastano html e javascript.
ma dovrai usare anche un linguaggio lato server.

[fluxKami]

Certo, le coordinate di ogni punto saranno contenute in una riga di una tabella mysql, insieme agli altri dati del ristorante.
Però non ho idea di come fare ad inserire la mappa adattandola a quelle esigenze che ho scritto sopra, hai voglia di darmi qualche indicazione?

[fermat]

prima di tutto scegli quale mappa vuoi usare (google maps piuttosto che un'altra).
ogni mappa ha le sue API e la sua documentazione.

poi butta giù un pò di codice, almeno quello iniziale.
così prendi confidenza con le sue funzioni.

così da zero direi che è difficile darti aiuto....

[fluxKami]

Chiedo scusa per il ritardo nella risposta ma ho avuto bisogno di tempo per la creazione del progetto del sito ed adesso sono giunto al momento di sviluppare la mappa.
Il WIP è questo: http://maremmahost.it/
Dei 4 punti sopra citati di cui ho necessità, il terzo è già attivo di per sé grazie all'iframe di google maps, che al momento ha questo codice:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d750475.4812215191!2d10.702175521215633!3d42.71335735833473!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1329a9488500a5f5%3A0x3082c90e3e480b0!2sProvincia+di+Grosseto%2C+Italia!5e0!3m2!1sit!2sit!4v1498205394327" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>

Come posso fare a fare il resto?

[fermat]

scusa, ma quali sono le tue conoscenze a riguardo di:
- database
- ajax
- php e javascript

perchè mi (ri)sorge il dubbio che ti manchino un pò di basi.
cosa devi fare te lo abbiamo detto.
farlo tocca a te!

PS: non usare un iframe per google maps, è meno flessibile per quello che devi fare tu.
sul sito ufficiale, infatti, vengono usati dei semplici div.
e ripeto: non copiare il codice da altri siti senza capire quello cha fai!

[fluxKami]

Sono in grado di utilizzare SQL ma, una volta recuperate due variabili contenenti le coordinate x e y del marker, non ho idea di come applicarle dentro allo script google.
Non ho la benché minima competenza riguardo ad ajax, ma me la cavo con php e javascript. L'iframe l'ho preso da google maps, cliccando su "condividi" quello è il codice che google maps da in automatico per l'integrazione nell'HTML di un sito. Non ho idea di che altro sistema utilizzare.

[fermat]

bhe però la vedo dura che qualcuno ti scriva tutto il codice!
se sei a digiuno di ajax, prima studiati quello, e poi applicalo altuo caso.

detto ciò, l'iframe non è sbagliato di per se, solo non va bene nel tuo caso.
è poco flessibile.
se cerchi su google, ce ne stanno una marei di esempi su come usare google maps con ajax.
te ne mando uno privato.

[fluxKami]

Saresti in grado di dirmi cosa ho sbagliato in questo codice? Sto tentando di piazzare un marker tramite geolocalizzazione.

function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var coordx = position.coords.latitude;
                var coordy = position.coords.longitude;
                var geocoords = new google.maps.LatLng(coordx,coordy);
            });
        }
}
getLocation();
var marker = new google.maps.Marker(
{
position: geocoords,
map: map
}

[fluxKami]

Suppongo sia un discorso di accesso alla variabile interna alla funzione, ma non so come risolvere.