[DajSięPoznać#10] Google Maps API

Wstęp

Geografia w połączeniu z informatyką mogą być całkiem ciekawe. W moim projekcie lokalizacja odgrywa ważną rolę, dlatego warto, by jednym z jego elementów składowych stały się mapy Google, zwłaszcza, że codziennie ich używamy jako użytkownicy. Google udostępnia API za darmo do 25000 requestów dziennie. Co więcej, od jakiegoś czasu nie musimy generować i załączać klucza dostępowego.

abc

Geocoding i Reverse Geocoding

Pierwszy z nich jest transformacją nazwy (np. adresu) na współrzędne geograficzne (długość, szerokość), drugi jest operacją odwrotną: dla współrzędnych znaleziony zostanie dokładny adres tj. ulica, miasto, kraj, kod pocztowy. Użycie jest ich jest bardzo proste.

activate(params){
    this.name = params.name + ",Kraków";
    let self = this;
    let geocoder = new google.maps.Geocoder();

    geocoder.geocode( {'address': this.name}, (res, status) => {
        this.findPlaces(res[0].geometry.location);
    });
}

findPlaces(coords){
    let self = this;
    let geocoder = new google.maps.Geocoder();

    geocoder.geocode( {'latLng': self.coordinates}, (res, status) => {
        console.log(res);
    });
}

 

Tworzenie mapy

Żeby zinstancjonować mapę wystarczy wskazać punkt, na który ma ona pokazywać, poziom przybliżenia oraz rodzaj mapy (drogowa, satelitarna,  terenu, hybrydowa). Dodatkowo dodany zostaje marker wskazujący zdekodowane położenie. Jeżeli korzystamy z Aurelii, to całość należy wykonać w metodzie attached, gdyż api google maps wykonuje operacje bezpośrednio na drzewie DOM.

attached(){	
	this.createMap(this.coordinates);
}

createMap(coordinates){
    let mapProp = {
        center:coordinates,
        zoom:17,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

    let marker = new google.maps.Marker({
        position: coordinates,
        map: this.map,
        title: this.name
    });

    marker.setMap(this.map);
}

 

Directions API

Directions to serwis umożliwiający wyrysowanie na mapie optymalnej ścieżki między dwoma punktami.

getRoute(){
    let self = this;

    this.geocode(this.myPlace, (res, status) => {
        let placeCoordinates = res[0].geometry.location;
        
        let directionsService = new google.maps.DirectionsService;
        let directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(self.map);

        directionsService.route({
            origin: self.coordinates,
            destination: placeCoordinates,
            travelMode: google.maps.TravelMode.DRIVING
        }, 
        (response, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    });
}

 

Klasa DirectionsRendered zadba także o odpowiedni zoom w zależności od długości wytyczonej ścieżki.

adewa

DistanceMatrix API

Google jest całkiem niezły w szacowaniu czasów dojazdu pomiędzy różnymi miejscami (ma dużo danych, które zbiera ze smartfonów ludzi stojących w korkach). Do tych informacji również mamy dostęp dzięki DistanceMatrix, który zwraca nam odległość oraz szacowany czas dojazdu.

calculateDistance(){
    let distanceMatrixService = new google.maps.DistanceMatrixService();
    let self = this;

    distanceMatrixService.getDistanceMatrix(
    {
        origins: [this.coordinates],
        destinations: [this.placeCoordinates],
        travelMode: google.maps.TravelMode.DRIVING,
    }, (response, status) =>{
        let val = response.rows[0].elements[0];
        self.timeToWork = val.duration.text;
        self.kilometers = val.distance.text;
    });        
}

 

Jak widać API map jest bardzo proste w użyciu, a można je kontekstowo zastosować w naszej informacji np kiedy w przedstawianych danych lokalizacja geograficzna ma duże znaczenie.

Advertisements

One thought on “[DajSięPoznać#10] Google Maps API

  1. Pingback: [DajSięPoznać] Podsumowanie | When the smoke is going down

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s