Angular 2 component google maps - ArturLesny/angular2-googlemaps_component GitHub Wiki

W projekcie wgrana jest wersja "rozpoznawcza" aplikacji, która pokazuje wykorzystanie mechanizmu generowania mapki na stronie WWW na podstawie podanego adresu, przy czym adres nie jest podawany przez pole formularza, ale jako wartość zmiennej (np. wartość pobrana z bazy danych). W pliku index.html zaznaczono jakie dodatkowe moduły npm trzeba doinstalować, aby całość poprawnie działała.

W samym pliku index.html nic istotnego nie ma.

W pliku app.modules.ts trzeba zwrócić uwagę na linię :

import { AgmCoreModule } from 'angular2-google-maps/core';

oraz w sekcji

@NgModule({

...

imports: [

...

AgmCoreModule.forRoot({
  apiKey: "AIzaSyA0Dx_boXQiwvdz8sJHoYeZNVTdoWONYkU",
}),

],

Bez apiKey serwis Google nie chce poprawnie współpracować.

W pliku app.component.ts wprowadzono 3 zmienne typu string : adres1 ... adres3,

przykładowa zawartość : adres1:string = "ul.Spacerowa 5, Warszawa"

zalecana jest w formie : ulica, miejscowość - wystarczy dla podanego przypadku zamienić kolejność i będzie podana inna lokalizacja (warto sprawdzić).

W pliku app.component.html warto zwrócić uwagę na wywołanie komponentu googlemap, czyli linie zawierające wiersz np.

<googlemap [address]="adres1" >

dzięki czemu zawartość zmiennej adres1 jest podstawiana do zmiennej address wykorzystywanej przez komponent googlemap.

Przechodząc do komponentu googlemap,

w pliku googlemap.component.ts trzeba zwrócić uwagę na linie :

import { MapsAPILoader } from 'angular2-google-maps/core';

czyli współpraca z gotową biblioteką.

declare var google: any;

(rozwiązuje często zgłaszany problem : Cannot find name 'google')

dodatkowo wprowadzono linie :

inputs: ['address']

i

@Input() address;

dzięki czemu przekazywana jest wartość dla zmiennej address do tego komponentu.

Wykorzystując metodę geocode modułu MapsAPILoader znajdowane są "koordynaty" (czyli dł. i szer. geogr.) dla danego adresu, na bazie których generowana jest mapka oraz marker (wykorzystanie komponentu sebm-google-map z gotowej biblioteki - wywołanie jej w pliku googlemap.component.html)

W przykładowej aplikacji specjalnie podano 3 adresy aby zaprezentować, że choć komponent googlemap jest jeden to na tej samej stronie może być wywołany wiele razy z różnymi wartościami/adresami.

Rozwiązanie zaczerpnięte m.in. ze strony : https://github.com/SebastianM/angular-google-maps/issues/689