Montag, Januar 09, 2017

Google Maps Karte für den Blog

Draussen schneits. Die "Zicken" stehen in der Garage.
Zeit also sich mal wieder um den Blog zu kümmern.
Wir wollen schon lange den Teil mit den Touren ausbauen. Haben mit GPSies herum gespielt. Versucht Touren welche wir gefahren sind, einzubinden.

Touren im einzelnen


Anhand der Statistik wird dieses Angebot bereits rege benutzt.  Der Aufwand dafür hält sich in Grenzen. Wir werden  das also auch in Zukunft so weiter führen.

Aber so ganz befriedigt mich das ganze noch nicht. Ich möchte eine Karte mit Fähnchen, wie früher, Orte die wir besucht haben, Strecken die wir gefahren sind.

Eine Pinnwand also, digital, natürlich. Und bunt. Wo gibts so was?
Googeln......
Ein erster Ansatz, Positionen in einem Foto. Auf dem Foto im Photoshop eine Markierung zeichnen.
Umständlich, statisch, aufwendig. Das Foto lässt sich erstmal nicht "zoomen" und lässt es sich "zoomen" stimmen die Positionen der Links nicht mehr.

Neuer Ansatz
Google API Maps scheint vielversprechend.
Ich suche nach Beispielen, finde viele, aber keines davon schein mit "Blogspot" verträglich.
Entweder mache ich was falsch oder habe was falsch verstanden.
Erstmal passiert beim öffnen der Seite gar nichts.
Zu erwähnen ist das meine "HTML", "Java", "Bootstrap", und "was auch immer" Kentnisse entweder veraltet, oder dann schlicht nicht vorhanden sind.

Die Google API Devolper Seite weiss Rat.
Erstmal also einen API Key holen. Im Bereich unseres Blogs ist dieser kostenlos. Geht das "Ding" irgendwann durch die Decke haben wir jedoch ein Problem.
Aber aktuell reicht das Kontingent vorig.

Und so sieht sie am Ende aus... Voila, la Carte


Sieht doch ganz nett aus. Jeder Marker ist eine Geschichte innerhalb des Blogs, eine Webcam, oder ein Pass den wir befahren.
Klickt doch auf der Karte einfach mal auf einen Marker.

Natürlich lässt sich die Karte wie gewohnt vergrössern, verschieben und was auch immer.
An andersfarbigen Markern arbeiten wir noch. :-)

Und wie programmiert man so etwas?
Am Anfang gestaltet sich das ganze etwas schwierig. Kein Code "Schnipsel" den ich finde will so richtig funktionieren.
Auf den Google Seite dann die richtigen Beispiele.

Erstmal ein Container für die Karte

Danach die Karte












Anschliessend der erste Marker









Den folgenden Code mit dem API KEY habe ich in die Vorlage, direkt nach dem
Tag gelegt.Du brauchst, willst Du das für Dich verwenden, Deinen eigenen API KEY einsetzen.





Was ich noch ändern möchte sind die Marker.
Ich hätte gerne für jede Rubrik "eigene" Marker. Vielleicht erhalte ich ja den einen oder anderen Tip von euch.


Reaktionen:

1 Kommentar:

  1. Ich verwende immer Photoshop. Und eine andere nützliche Software Übersicht dieser Seite wenn Sie ein Foto von Ihrer Festplatte oder Flash-Gerät gelöscht haben.

    AntwortenLöschen