{"id":603,"date":"2016-05-24T11:15:28","date_gmt":"2016-05-24T09:15:28","guid":{"rendered":"https:\/\/apalion.com\/?post_type=project&amp;p=603"},"modified":"2016-05-24T11:15:28","modified_gmt":"2016-05-24T09:15:28","slug":"api-google-maps","status":"publish","type":"project","link":"https:\/\/apalion.com\/fr\/project\/google-maps-api\/","title":{"rendered":"Google Maps\u00ae API"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8220;1&#8243; admin_label=&#8220;section&#8220; _builder_version=&#8220;4.16&#8243; global_colors_info=&#8220;{}&#8220;][et_pb_row admin_label=&#8220;row&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; global_colors_info=&#8220;{}&#8220; column_structure=&#8220;1_3,2_3&#8243;][et_pb_column type=&#8220;1_3&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_text admin_label=&#8220;Text&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; hover_enabled=&#8220;0&#8243; use_border_color=&#8220;off&#8220; border_color=&#8220;#ffffff&#8220; border_style=&#8220;solid&#8220; global_colors_info=&#8220;{}&#8220; sticky_enabled=&#8220;0&#8243;]Im Rahmen dieses Auftrages wurde ein Skript entwickelt, welches auf die Google Maps API aufsetzt um Postleitzahl-Gebietsgrenzen anzuzeigen. Kombiniert wurden dazu die Google Maps API, die Google Geolocation API sowie die Google Fusion Tables API. Als Basisdatensatz f\u00fcr die Gebietsgrenzen\u00a0wurde der folgende, als public domain verf\u00fcgbare <a class=\"intext\" href=\"https:\/\/arnulf.us\/PLZ\" target=\"_blank\" rel=\"noopener\">Datensatz<\/a> verwendet. Dieser musste noch angepasst und konvertiert werden.<br \/>\n[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8220;2_3&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_text _builder_version=&#8220;4.22.2&#8243; _module_preset=&#8220;default&#8220; hover_enabled=&#8220;0&#8243; sticky_enabled=&#8220;0&#8243;]<\/p>\n<h1>Google Geolocation API<\/h1>\n<p>[\/et_pb_text][et_pb_image src=&#8220;https:\/\/apalion.com\/wp-content\/uploads\/2016\/05\/maps-1-copy.jpg&#8220; alt=&#8220;Google Maps\u00ae PLZ Suche Ausschnitt&#8220; title_text=&#8220;Google Maps\u00ae PLZ Suche Ausschnitt&#8220; show_bottom_space=&#8220;off&#8220; align_tablet=&#8220;center&#8220; align_last_edited=&#8220;on|desktop&#8220; admin_label=&#8220;Image&#8220; _builder_version=&#8220;4.16&#8243; animation_style=&#8220;fade&#8220; animation_duration=&#8220;500ms&#8220; use_border_color=&#8220;off&#8220; border_color=&#8220;#ffffff&#8220; border_style=&#8220;solid&#8220; animation=&#8220;fade_in&#8220; sticky=&#8220;on&#8220; always_center_on_mobile=&#8220;on&#8220; global_colors_info=&#8220;{}&#8220; align_phone=&#8220;center&#8220;] [\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8220;1&#8243; specialty=&#8220;on&#8220; admin_label=&#8220;Section&#8220; _builder_version=&#8220;4.16&#8243; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;1_2&#8243; specialty_columns=&#8220;2&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_row_inner admin_label=&#8220;Row&#8220; _builder_version=&#8220;4.16&#8243; global_colors_info=&#8220;{}&#8220;][et_pb_column_inner saved_specialty_column_type=&#8220;1_2&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_image src=&#8220;https:\/\/apalion.com\/wp-content\/uploads\/2016\/05\/maps-2-copy.jpg&#8220; alt=&#8220;Google Maps\u00ae API Postleitzahlengebiete auf einem Macbook&#8220; title_text=&#8220;Google Maps\u00ae API Postleitzahlengebiete auf einem Macbook&#8220; show_bottom_space=&#8220;off&#8220; align_tablet=&#8220;center&#8220; align_last_edited=&#8220;on|desktop&#8220; admin_label=&#8220;Image&#8220; _builder_version=&#8220;4.16&#8243; animation_style=&#8220;fade&#8220; animation_duration=&#8220;500ms&#8220; use_border_color=&#8220;off&#8220; border_color=&#8220;#ffffff&#8220; border_style=&#8220;solid&#8220; animation=&#8220;fade_in&#8220; sticky=&#8220;on&#8220; always_center_on_mobile=&#8220;on&#8220; global_colors_info=&#8220;{}&#8220; align_phone=&#8220;center&#8220;] [\/et_pb_image][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner admin_label=&#8220;Row&#8220; _builder_version=&#8220;4.16&#8243; global_colors_info=&#8220;{}&#8220;][et_pb_column_inner saved_specialty_column_type=&#8220;1_2&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_text admin_label=&#8220;Text&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; use_border_color=&#8220;off&#8220; border_color=&#8220;#ffffff&#8220; border_style=&#8220;solid&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<div class=\"grid_5\">\n<p>Zus\u00e4tzlich werden alle Gebietsgrenzen \u00fcber einen Marker (der PLZ) noch kenntlich gemacht. Dieser Marker ist auch anw\u00e4hlbar, wodurch sich ein Popup \u00f6ffnet, welcher wieder mit beliebigem Text ausgestattet werden kann. Im Beispielbild ist zu sehen, dass die Postleitzahl angezeigt wird, ebenso wie ein weiterer Text mit einem Link, welcher ebenfalls die PLZ beeinhaltet, sodass diese f\u00fcr andere Zwecke weiterverwendet werden k\u00f6nnte.<\/p>\n<\/div>\n<p>[\/et_pb_text][\/et_pb_column_inner][\/et_pb_row_inner][\/et_pb_column][et_pb_column type=&#8220;1_2&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_text admin_label=&#8220;Text&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; use_border_color=&#8220;off&#8220; border_color=&#8220;#ffffff&#8220; border_style=&#8220;solid&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<div class=\"grid_5\">\n<p>Das Skript reagiert auf GET-Parameter im Browser, welche die Farbe und Auswahl der Postleitzahlen bestimmen. Ein Beispielaufruf mit nur einer Postleitzahl s\u00e4he mit den Standardeinstellungen wie folgt aus: <i>?script.php?<span class=\"tlcolor\">zip<\/span>=46509&amp;<span class=\"tlcolor\">mColor<\/span>=ff0000<\/i>. Die Parameternamen sind beliebig \u00e4nderbar.<\/p>\n<p>Da das Ziel des Projekts dahinging, umliegende Postleitzahlen zu einer Hauptpostleitzahl mit zwei verschiedenen Farben markieren zu k\u00f6nnen, existieren zus\u00e4tzlich noch weitere Parameter: <i>script.php?<span class=\"tlcolor\">zip<\/span>=46509&amp;<span class=\"tlcolor\">mColor<\/span>=ff0000&amp;<span class=\"tlcolor\">rZip<\/span>=46459,47665&amp;<span class=\"tlcolor\">rColor<\/span>=0000ff&amp;<span class=\"tlcolor\">fZip<\/span>=46487&amp;<span class=\"tlcolor\">fColor<\/span>=00ff00<\/i>.<\/p>\n<p>Wie im Beispiel zu sehen ist k\u00f6nnen auch mehrere Postleitzahlen angegeben werden, in dem Falle durch Komma getrennt. Auch der Seperator kann beliebig ge\u00e4ndert werden. Das Skript nimmt also 3 verschiedene Arten von PLZ mit jeweils einer Farbe entgegen und stellt diese auf einer Google Maps Karte farbig dar.<\/p>\n<\/div>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_section][et_pb_section fb_built=&#8220;1&#8243; admin_label=&#8220;Section&#8220; _builder_version=&#8220;4.16&#8243; global_colors_info=&#8220;{}&#8220;][et_pb_row admin_label=&#8220;Row&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;4_4&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_text admin_label=&#8220;Text&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; use_border_color=&#8220;off&#8220; border_color=&#8220;#ffffff&#8220; border_style=&#8220;solid&#8220; global_colors_info=&#8220;{}&#8220;]<\/p>\n<div class=\"clear\">Der Vorteil an der Implementierung ist, dass das Skript in bestehende Webseiten integriert werden kann. Entweder als dynamisch bewegliche Karte, oder als Bildausschnitt. Ein m\u00f6gliches Einsatzszenario k\u00f6nnte ein Shop sein, welcher verschiedene Produkte nur in bestimmte Regionen liefert. Das Skript k\u00f6nnte in der Detailbeschreibung der Produkte eingebunden werden und die Regionen in die das Produkt geliefert werden kann in zwei Farben darstellen, f\u00fcr &#8222;sofort lieferbar&#8220; oder &#8222;derzeit ausverkauft&#8220;. Das Skript kann aber auch um weitere Farben und PLZ-Arten erweitert werden, sodass eine Vielzahl weiterer Einsatzszenarien m\u00f6glich w\u00e4ren.<\/div>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Im Rahmen dieses Auftrages wurde ein Skript entwickelt, welches auf die Google Maps API aufsetzt um Postleitzahl-Gebietsgrenzen anzuzeigen. Kombiniert wurden dazu die Google Maps API, die Google Geolocation API sowie die Google Fusion Tables API. Als Basisdatensatz f\u00fcr die Gebietsgrenzen\u00a0wurde der folgende, als public domain verf\u00fcgbare Datensatz verwendet. Dieser musste noch angepasst und konvertiert werden. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":604,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[17,19,18],"project_tag":[],"class_list":["post-603","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-softwareentwicklung","project_category-technologieentwicklung","project_category-webentwicklung"],"acf":[],"_links":{"self":[{"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/project\/603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/comments?post=603"}],"version-history":[{"count":0,"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/project\/603\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/media\/604"}],"wp:attachment":[{"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/media?parent=603"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/project_category?post=603"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/apalion.com\/fr\/wp-json\/wp\/v2\/project_tag?post=603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}