Google Maps mit Angular (Service)

Im letzten Teil habe ich euch erklärt, wie ich meine Directive für eine Karte im Kontaktbereich meiner Website erstellt habe. Im nächsten Schritt kümmern wir uns um den dazugehörigen Service. Ich beginne damit, dass ich den Service deklariere. Diesem injecte ich dann den logger zum debuggen während der Entwicklungspase. Zusätzlich injecte ich noch meinen API-Service, welcher mir später lediglich die von mir gewünschten Styles aus einer lokalen JSON-Datei anfordert. Diese Services definiere ich im Scope meines MapService.

Initialisierung des Service.

Diese Funktion wird wie in meinem letzen Post beschrieben mit dem DOM-Element, welches später die Karte enthalten soll, und die ebenfalls in der Directive gesetzten Optionen für die Karte aufgerufen. Diese Parameter reiche ich dann später zusammen mit dem Map-Style weiter um das Karten-Objekt zu erzeugen.
Die Map-Styles habe ich mir zuvor auf der Seite von Snazzy-Maps erstellt und in einer JSON-Datei gespeichert. Diese Datei fordere ich über meinen API-Service aus einem lokalen Verzeichnis auf meinem Server an. Ist die Datei fertig geladen, wird mit alle Parameter zusammen das Map-Objekt über die Funktion initMapWithStyles() erstellt und die Position des Markers auf der Karte (hier leider noch mit fixen Koordinaten) gesetzt.

Initialisierung der Karte mit einem Style.

Zum erstellen des Karten-Objekts werden die gelieferten Parameter zusammengeführt. Hierfür erzeuge ich mir ein mapOptions-Objekt und setze den Mittelpunkt der Karte auf die (ebenfalls noch fixen Koordinaten). Zusätzlich füge ich die Styles zu diesem Objekt hinzu. Das Ganze führe ich dann über anguarl.extend() zusammen. So erhalten ich ein Objekt mit allen Optionen, die ich zum Erstellen der Karte benötige.
Gesagt. Getan. Als Rückgabewert wird ein neues Google-Maps-Objekt erzeugt, welches sich mit element[0] auf das DOM-Element bezieht ('#map_canvas'), in welches die Karte eingefügt werden soll und mit mapOptions die vorher zusamnmengeführten Optionen für die Karte enthält.

Markierung auf der Karte setzten.

Damit der Benutzer auch weiss, wo er mich auf der Karte findet, wird an den gewünschten Koordinaten ein Marker mit meinem Namen als Titel gesetzt.