In Bubble Google Maps API Keys hinzufügen

Schritt-für-Schritt Anleitung: Konfiguriere die notwendigen Google Maps API Keys in Google Cloud, um Google Maps in Bubble.io anzuzeigen.

Chris Strobl
Chris Strobl
Video Tutorial: In bubble.io Google Maps API Keys hinzufügen

Video Transkript

Ich zeige euch jetzt wie man Google Maps in Bubble integriert. Einige haben da Probleme, vor allem mit den API Keys und wir versuchen das jetzt so schnell, wie es geht, hinzubekommen. Manchmal ist es sogar ein bisschen kompliziert mit den verschiedenen Keys. Wenn wir eine Google Map reinziehen in Bubble, dann kriegen wir hier den Issue. Wennn wir direkt darauf klicken auf den Issue kommen wir in den Settings Tab und sehen hier, dass wir zwei API Keys brauchen. Wir brauchen den Google Geocode API Key und den Google Maps API Key. Ihr kommt natürlich auch hier rein, wenn ihr unter Settings, General direkt rein geht. So, zunächst mal müssen wir auf developers.google.com gehen. Dort müsst ihr eingeloggt sein und einen Account haben. Wenn ihr jetzt rein geht, dann geht ihr unter Google Cloud und in die Konsole. Es gibt natürlich auch andere Wege hier hin, aber das ist der Einfachste. Ihr erstellt ein neues Projekt. z.B. Bubble Maps Test und das ist meine Organization. Wir gehen jetzt in das Projekt rein und das was wir tun müssen ist Wir gehen unter APIs & Services in die Library und suchen jetzt ein paar APIs, die wir brauchen. Es sind insgesamt fünf Stück. Die erste  ist die Geocoding API. Wir klicken auf Enable. Die zweite  API, die wir brauchen, die wir enablen müssen... Der einfachste Weg ist wiederum API Library ist die Places API. Die gibt uns verschiedene Informationen über Orte. Das brauchen wir dann eben für die verschiedenen Varianten dieser Google Maps Integration. Man kann auch hier oben direkt eingeben. Die Dritte ist die Geolocation API. Wir hatten vorhin Geocoding, jetzt Geolocation. Die Vierte ist die Maps JavaScript API Die ist natürlich die Relevanteste. Ihr könnt immer, das ist das Tolle: Google ist einee der am besten dokumentierten API, die es gibt... Ihr könnt natürlich immer noch mehr darüber lesen und wie das genau funktioniert, wie auch das Pricing der API ist, aber Google ist da sehr freundlich, gerade für kleinere Projekte. Natürlich ist es später dann teurer. Die allerletzte ist nun die Timezone API, die wir brauchenn. Timezone data for anywhere in the world. und das ist die Fünfte. Damit sind alle fünf APIs enabled. Wir können das auch hier sehen, dass diese fünf (Geocoding, Geolocation, Maps JavaScript,...).  Der nächste Schritt ist, nachdem wir die 5 APIs enabled haben, sind jetzt die Credentials. Wir klicken auf Create credentials und hier API Key. Das ist jetzt der erste Key, den wir erstellt haben. Wir benennen diesen um in den Client. Und wir stellen einen zweiten Key. Den nennen wir Server, das hat den einfachen Grund der Security und das sind auch genau diese zwei Keys, die uns Bubble gezeigt hat, dass wir diese beiden brauchen. Jetzt seht ihr hier schon die Fehlermeldung bzw. die Warnung, dass wir den restriktieren müssen. Wir fangen einmal an mit dem Client, dann wollen wir diesen restriktieren. Application restrictions und gegen hier auf HTTP referrers Und jetzt seht hier wie man im Detail diese API restriktieren kann mit einer specific URL oder mit einem sub.example.com. Was wir jetzt brauchen ist folgendes: Add an item und wir nehmen von unserer URL die vordere URL. Wie ihr hier seht... und packen die hier rein und machen einen * dran und jetzt werden alle diese URLs jetzt angezeigt, vor allem auch die Version- test und die Debug Mode. So, das wäre jetzt der erste Teil. Der zweite API Key ist nun der Server. Auch hier haben wir wieder die Warnung, dass wir den restriktieren. Das machen wir aber anders diesmal. Hier machen wir eine API Restriction und wählen jetzt genau die fünf APIs aus, die wir hatten.  Wir hatten die Geocoding API, die wir erlauben, wir hatten die Places API. Wir hatten die Geolocation API. Wir hatten die Maps JavaScript API und als allerletztes hatten wir auch die Timezones API, das heißt hier. dass dieser Key nur diese fünf APIs machen kann. Und jetzt haben wir auch den Server konfiguriert. Der nächste Schritt ist dass wir jetzt diesen Google Maps Account verlinken mit dem Billing Account. Das ist ganz wichtig, um im Endeffekt auch die APIs auszuführen. Leider hat Google kein, also Google will einen Billing Account gelinkt haben und es geht leider nicht mehr, dass wir das einfach so machen kostenlos. Das heißt da gibt Bubble den Fehler auch an und Google, gib dir den Fehler, dass es nicht funktioniert. Nichtsdestotrotz haben wir ein sehr großes Free Tier. Deswegen habe ich bisher noch kein Geld bezahlt für Google Maps, aber ihr müsst so einen Billing Account verlinken. Wenn ihr ihn noch nicht erstellt habt, erstellt ihn einfach. Ich habe natürlich schon einen und haben den jetzt gelinkt mit dem Projekt eben und wenn ich jetzt zurück gehe zu den APIs, mein Dashboard und in die Credentials rein dann nemen wir jetzt diesen Server... Den packen wir rein in den Google Maps API Key und wir nehmen den Client... Den packen wir rein in den API Key. Jetzt, da wir die API Keys haben, testen wir es noch. Wir gehen auf die Map machen hier Currrent geographic position , Preview. Und haben jetzt den Google Maps API.

APIsTutorials