{"id":2960,"date":"2021-06-03T22:00:56","date_gmt":"2021-06-03T20:00:56","guid":{"rendered":"https:\/\/vielhuber.de\/?p=2960"},"modified":"2021-06-03T22:25:35","modified_gmt":"2021-06-03T20:25:35","slug":"google-maps-ohne-api-key","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/","title":{"rendered":"Google Maps ohne API Key"},"content":{"rendered":"\n<p>Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/overview\" target=\"_blank\" rel=\"noreferrer noopener\">Maps JavaScript API<\/a>, die einen API-Key voraussetzt und bei h\u00f6heren Zugriffszahlen nicht zu untersch\u00e4tzende <a href=\"https:\/\/cloud.google.com\/maps-platform\/pricing\/sheet?hl=de\" target=\"_blank\" rel=\"noreferrer noopener\">Kosten verursachen<\/a> kann. Dabei gibt es tolle Alternativen wie <a href=\"https:\/\/www.mapbox.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">mapbox<\/a> oder <a href=\"https:\/\/www.openstreetmap.de\/\" target=\"_blank\" rel=\"noreferrer noopener\">OpenStreetMap<\/a>, die aber noch nicht die Featurevielfalt von Google erreichen. Google selbst bietet auch einen Weg ohne API Key \u00fcber die Teilen-Funktion an, die wir f\u00fcr unsere Zwecke nutzen k\u00f6nnen.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Diesen Weg kann man programmatisch nutzen, um beliebige Adressen (sogar ohne Kenntnis von L\u00e4ngen- und Breitengrad) auszugeben. Obendrein enth\u00e4lt die Karte (im Gegensatz zum JS-Pendant) einen Link zum Routenplaner. Die Karte l\u00e4sst sich au\u00dferdem mit Hilfe von CSS-Filtern auch etwas aufh\u00fcbschen (wenngleich das Ergebnis nicht ganz an die <a href=\"https:\/\/snazzymaps.com\/style\/79\/black-and-white\" target=\"_blank\" rel=\"noreferrer noopener\">nativen Styles<\/a> heranreicht, die mit der JS-API m\u00f6glich sind).<\/p>\n\n\n\n<p>Viele Jahre kursierte dazu der Weg \u00fcber den Parameter <strong>output=embed<\/strong>, den Google offiziell aber nicht unterst\u00fctzt und es damit in der j\u00fcngeren Vergangenheit vermehrt zu Anzeigefehlern kommt:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"1.html\">331190767bb32b2468632e609223c53e<\/p>\n\n\n\n<p>Nutzt man \u00fcber <a href=\"https:\/\/maps.google.de\" target=\"_blank\" rel=\"noreferrer noopener\">maps.google.de<\/a> die offizielle Teilen-Funktion, erh\u00e4lt man beispielsweise folgenden Code:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"2.html\">331190767bb32b2468632e609223c53e<\/p>\n\n\n\n<p>Wenn wir die lange URL im Parameter <strong>src<\/strong> etwas strukturieren, ergibt sich ein Muster:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"3.html\">331190767bb32b2468632e609223c53e<\/p>\n\n\n\n<p>Dabei erkennen wir folgende Datentypen:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>m: Matrix<\/li><li>s: String<\/li><li>f: Float<\/li><li>d: Double<\/li><li>i: Integer<\/li><li>e: Enum<\/li><\/ul>\n\n\n\n<p>Nach ein paar Trial &amp; Error Versuchen k\u00f6nnen wir einige Werte eliminieren und die wichtigsten Werte in Variablen verpacken, um beispielsweise die Adresse dynamisch festzulegen:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"4.php\">331190767bb32b2468632e609223c53e<\/p>\n\n\n\n<p>Wir k\u00f6nnen abschlie\u00dfend z.B. mit Hilfe des folgenden CSS-Codes die Karte aufh\u00fcbschen hinzuf\u00fcgen:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"5.css\">331190767bb32b2468632e609223c53e<\/p>\n\n\n\n<p>Am Ende erhalten wir eine kostenlos nutzbare, dynamische Map, die zuverl\u00e4ssig funktioniert:<\/p>\n\n\n\n<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d5000!2d0!3d0!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0!2sAuenstra%C3%9Fe%206%2C%2080469%20M%C3%BCnchen!5e0!3m2!1sde!2sde!4v1622750431000!5m2!1sde!2sde\" style=\"height:300rem; filter: grayscale(50%) invert(5%) sepia(10%) saturate(70%) brightness(100%) contrast(110%) hue-rotate(-130deg);\" allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\n","protected":false},"excerpt":{"rendered":"<p>Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der Maps JavaScript API, die einen API-Key voraussetzt und bei h\u00f6heren Zugriffszahlen nicht zu untersch\u00e4tzende Kosten verursachen kann. Dabei gibt es tolle Alternativen wie mapbox oder OpenStreetMap, die aber noch nicht die Featurevielfalt von Google erreichen. Google selbst bietet auch einen Weg ohne API Key \u00fcber die [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-2960","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Google Maps ohne API Key &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der Maps JavaScript API, die einen API-Key voraussetzt und bei h\u00f6heren Zugriffsz...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Maps ohne API Key &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der Maps JavaScript API, die einen API-Key voraussetzt und bei h\u00f6heren Zugriffszahlen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-03T20:00:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-03T20:25:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/google-maps-ohne-api-key\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/google-maps-ohne-api-key\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Google Maps ohne API Key\",\"datePublished\":\"2021-06-03T20:00:56+00:00\",\"dateModified\":\"2021-06-03T20:25:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/google-maps-ohne-api-key\\\/\"},\"wordCount\":294,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/google-maps-ohne-api-key\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/google-maps-ohne-api-key\\\/\",\"name\":\"Google Maps ohne API Key &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2021-06-03T20:00:56+00:00\",\"dateModified\":\"2021-06-03T20:25:35+00:00\",\"description\":\"Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der Maps JavaScript API, die einen API-Key voraussetzt und bei h\u00f6heren Zugriffszahlen\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/google-maps-ohne-api-key\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/google-maps-ohne-api-key\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/google-maps-ohne-api-key\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Maps ohne API Key\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Google Maps ohne API Key &#060; Vielhuber David","description":"Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der Maps JavaScript API, die einen API-Key voraussetzt und bei h\u00f6heren Zugriffsz...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/","og_locale":"de_DE","og_type":"article","og_title":"Google Maps ohne API Key &#060; Vielhuber David","og_description":"Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der Maps JavaScript API, die einen API-Key voraussetzt und bei h\u00f6heren Zugriffszahlen","og_url":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/","og_site_name":"Vielhuber David","article_published_time":"2021-06-03T20:00:56+00:00","article_modified_time":"2021-06-03T20:25:35+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Google Maps ohne API Key","datePublished":"2021-06-03T20:00:56+00:00","dateModified":"2021-06-03T20:25:35+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/"},"wordCount":294,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/","url":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/","name":"Google Maps ohne API Key &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2021-06-03T20:00:56+00:00","dateModified":"2021-06-03T20:25:35+00:00","description":"Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der Maps JavaScript API, die einen API-Key voraussetzt und bei h\u00f6heren Zugriffszahlen","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/google-maps-ohne-api-key\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Google Maps ohne API Key"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/posts\/2960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/comments?post=2960"}],"version-history":[{"count":20,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/posts\/2960\/revisions"}],"predecessor-version":[{"id":2987,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/posts\/2960\/revisions\/2987"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/media?parent=2960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/categories?post=2960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/eo\/wp-json\/wp\/v2\/tags?post=2960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}