Google Maps mit Angular (Directive)

So gut wie jede Website oder WebApp nutzt inzwischen irgend einen Kartenservice um z. B. die Position der Firma anzuzeigen, eine Route zu berechnen, POI´s darzustellen etc. Ich greife dabei gerne auf den kostenlosen Kartendienst von Google zurück. Im folgenden Beitrag erkläre ich euch, wie sich der Dienst problemlos in Angular (1.5.x) einbinden lässt.

Beginnen möchte ich als erstes einmal mit einem Screenshot der Kontaktsektion meiner persönlichen Website, um aufzuzeigen wo die Reise hingehen soll. Die Kartenstyles, welche dort zu sehen sind, habe ich von dem Service Snazzy Maps.

Damit ich schon von Anfang an etwas im Browser zu sehen bekommen, starte ich nach dem das Layout fertig ist, mit der Directive für die Sektion. Diese beinhaltet meist nur wenige Zeilen Code und liefert daher schnell sichtbare Ergebnisse.

Damit Angular weiss, wie es mit der Direktive umzugehen hat, muss ich einen Parameter setzen, der bestimmt, nach was Angular Ausschau halten soll. Ich beschränke mich meistens auf ein Element, weil ich nicht zu viel Durcheinander in meinem Markup haben möchte. Weitere Restriktiven findet Ihr hier.

Als nächstes sage ich Angular, was angezeigt werden soll, wenn es auf meine Direktive stößt. Hier kann sowohl "template" als auch "templateUrl" als Parameter gesetzt werden. Der "template"-Parameter enthält das direkte Markup, was an der Stelle der Direktive ausgegeben werden soll, während der "templateUrl"-Parameter lediglich die Url bzw. den relativen Pfad zu einem Template enthält. Über den Parameter "replace" (3.) sage ich Angular, dass er diese Direktive komplett gegen das Template austauschen soll.

Nachdem das Grund-Set-Up erledigt ist, kommt der spannende Teil. Über den Parameter Link kann ich die Direktive mit Funktionen verknüpfen. In diesem Fall ist das die Funktionalität der Karte. Dort lege ich als erstes die Optionen für die Karte fest. Auf meiner Seite soll z. B. keine UI angezeigt werde, weil ich möchte, dass jeder Benutzer genau das sieht, was ich bereitstelle. Zusätzlich lege ich noch das Zoomlevel fest. Damit weiss Google Maps wie nah es heranzoomen muss. Den Kartenmittelpunkt füge ich ebenfalls zu den Kartenoptionen hinzu, sofern noch keiner hinterlegt ist.

Zu  guter Letzt initialisiere ich noch meine Karte über den Kartenservice mit den oben zusammengebauten Optionen und dem Element in meinem Markup, welches später die Karte enthalten soll.

Wie dieser Kartenservice aufgebaut ist und funktioniert, erkläre ich im nächsten Blog-Post.