Besoin d'aide ?

Lien google maps personnalisé

Avatar de h3r0
h3r0

Bonjour à tous,

J'ai besoin de vous !

J'essaye de personnaliser un lien vers "google/maps/dir/" pour ouvrir la fonction gps de notre ami google avec comme point de départ ma position actuelle et en point d'arrivée un adresse stockée en plusieurs champs dans une table.

Bref, rien de compliqué je pense, mais je galère... J'en suis la et rien :(

<p class="text-muted mt-3">
    <i class="fa fa-map-marker"></i>
    {{ $user->user->address }}, {{ $user->user->postal }} {{ $user->user->city }} - {{ $user->user->country->name }}
    
    <script>
            if(navigator.geolocation)
                navigator.geolocation.getCurrentPosition(gpscoords);
    </script>

    {{ HTML::link('https://www.google.fr/maps/dir/'{gpscoords}.'/'.{{ $user->user->address }}, {{ $user->user->postal }}, {{ $user->user->city }}, {{ $user->user->country->name }}, 'Y aller !') }}   

</p>

Si quelqu'un peut m'aider ce serait topissime !

Un grand merci par avance !

Posté il y a 5 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Salut,

Euu t'est sûr de ta syntaxe pour getCurrentPosition ? (https://developer.mozilla.org/fr/docs/Web/API/Geolocation/getCurrentPosition) Fait un petit console.log(gpscoords); peut-être pour être certain de ce qu'il y a dedans ...

Et la syntaxte de HTML::link me semble étrange aussi (des {{ }} dans des {{ }} )

Posté il y a 5 mois
Avatar de nash
nash

Salut,

Il faut respecter le format lat:....,lng.... de google.

var gps = {"lat":43.56951,"lng":7.04679};

En plus, si je me souviens bien, tu dois positionner ton marqueur.

var marker = new google.maps.Marker({position: gps, map: map, icon: 'ton fichier marqueur'});
Posté il y a 5 mois
Avatar de h3r0
h3r0

@CinquièmeDimension : @nash

Merci de vos réponses !

La synthaxe sur navigator.geolocation me semble ok :

navigator.geolocation.getCurrentPosition(success[, error[, [options]])

error et options étant falcultatifs... le (gpscoords) retourne bien la coordonnées GPS de ma position actuelle

Je pense que c'est la construction du lien qui ne marche pas...

Si vous avez une idée je suis preneur !

Merci d'avance !

Posté il y a 5 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Le problème est que tu essaie d'envoyer les données JS gpscoords dans ton blade. Non seulement je ne suis pas certain qu'on puisse mélenger du blade et du JS, mais aussi, je pense que le blades est interprété avant le JS donc ça pose un problème.

Il faudrait tout faire en JS, un truc comme ça:

 if(navigator.geolocation){
 	navigator.geolocation.getCurrentPosition(gpscoords);

	let para = document.querySelector('p.text-muted.mt-3');
	let link = document.createElement('a');
	let linkText = document.createTextNode("Y aller !");

	link.appendChild(linkText);
	link.title = "my title text";
	link.href = "https://www.google.fr/maps/dir/" + gpscoords} + "/{{ $user->user->address }},{{ $user->user->postal }},{{ $user->user->city }},{{ $user->user->country->name }}";
	para.appendChild(link);
 }

Je suis pas sur des virgules...

Posté il y a 5 mois
Avatar de nash
nash

L'idée de CinquiemeDimension est bonne sauf que :

tu peux directement formater la variable user en json avec :

let user = @json($user) ou @json($user->user)

tu pourra suivre la notation json et le formatage de ta chaine d'uri selon ta version JS ES6 or ES5

Posté il y a 5 mois
Avatar de CinquièmeDimension
CinquièmeDimension

+1 pour nash en effet c'est encore mieux de passer les variable en json

Posté il y a 5 mois
Avatar de h3r0
h3r0

@nash @CinquièmeDimension

Hello !

c'est nickel , ca marche !

Merci à tous !

Bonne continuation à vous !

@++

Posté il y a 5 mois

Vous ne pouvez pas répondre à ce sujet.