Google MAPS

Libreria Google

Link utili

Articolo su parametri

Snippets

incorporare iframe API

doc: https://developers.google.com/maps/documentation/embed/embedding-map?hl=it https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

incorporare lat/lng (free)

link: https://stackoverflow.com/questions/17290256/get-google-map-link-with-latitude-longitude https://maps.google.com/maps?q=YOUR_LAT,YOUR_LON&z=14&output=embed

ottenere direzioni

Se si hanno lat e lng di partenza e destinazione:

var latDes = this.items[id].LongitudeWD;
var longDes = this.items[id].LatitudeWD;
var url = "https://www.google.com/maps/dir/?api=1";
var origin = "&origin=" + tempLatitude + "," + tempLongitude;
var destination = "&destination=" + latDes + "," + longDes;
var newUrl = new URL(url + origin + destination);

"https://www.google.com/maps/dir/{{ $start_lat }},{{ $start_lng }}/{{ $end_lat }},{{ $end_lng }}"

Se non si ha partenza o destinazione, omettere i parametri e lasciare due / consecutivi

"https://www.google.com/maps/dir//{{ $destination_lat }},{{ $destination_lng }}"

autocomplete con meno chiamate

Esempio applicato a Livewire (codice per componente solo alpineJs in ogni caso)

alpineJsData = {
show: false,
gerr: false,
txt: '',
srv: null,
suggestions: [],
init() {
	if(!window.google) {
		this.gerr = true;
		return;
	}
	const autocomplete_service = new google.maps.places.AutocompleteService();
	this.srv = autocomplete_service;
},
searchPlace() {
	this.srv.getPlacePredictions({
		input: this.txt,
		componentRestrictions: {
			country: ['it', 'fr', 'es', 'de', 'ch'],
		}
	}, (preds, stat) => {
		this.suggestions = preds;
		this.show = true;
	});
},
selectPlace(sugg) {
	this.txt = sugg.description;
	var request = {
		placeId: sugg.place_id,
		fields: ['address_components', 'geometry']
	};
	service = new google.maps.places.PlacesService(this.$refs.h);
	service.getDetails(request, (place, stat) => {
		{{-- console.log('place', {...place, full_txt: sugg.description}) --}}
		Livewire.emit('{{ $ev }}', {...place, full_txt: sugg.description})
		window.fv_custom_event({name: '{{ $ev }}', detail: {...place, full_txt: sugg.description}})
		this.suggestions = [];
		this.show = false;
	});
}
}

HTML base

<div x-data="alpineJsData">
	<div class="relative">
		<div class="relative ">
			<div x-show="gerr" x-cloak class="text-red-800">Errore Google</div>
			<input x-show="!gerr" x-on:input.debounce.500ms="searchPlace" x-model="txt" name="{{ $name }}" type="text" />
		</div>
		<div class="hidden" x-ref="h"></div>
		<ul x-show="show" x-cloak
			x-transition:enter=""
			x-transition:enter-start=""
			x-transition:enter-end=""
			x-transition:leave="transition ease-in duration-100"
			x-transition:leave-start="opacity-100"
			x-transition:leave-end="opacity-0"
			x-on:click.outside="selectPlace(suggestions[0])"
			class="absolute">
			<template x-for="suggestion in suggestions">
				<li x-on:click="selectPlace(suggestion)" class="relative" >
					<div class="flex">
						<span class="font-normal truncate" x-text="suggestion.description"></span>
					</div>
				</li>
			</template>
		</ul>
	</div>
</div>

Lpuk Obs

Esplora