{"id":2,"date":"2024-04-15T14:37:46","date_gmt":"2024-04-15T13:37:46","guid":{"rendered":"https:\/\/denisdev.bertastrasse1.ch\/?page_id=2"},"modified":"2024-05-01T11:38:34","modified_gmt":"2024-05-01T10:38:34","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/denisdev.bertastrasse1.ch\/","title":{"rendered":"Sample Page"},"content":{"rendered":"      <div \n      class=\"acf-map\" \n      data-lat=\"37.09024\" \n      data-lng=\"-95.712891\" \n      data-zoom=\"2\"\n    >\n                        <div class=\"marker\" data-lat=\"38.90839451664\" data-lng=\"-77.028459292529\">\n            <p>Washington<\/p>\n            <p>This example demonstrates how to display multiple Google Map field values on the same map.<\/p>\n          <\/div>\n                  <div class=\"marker\" data-lat=\"40.7127753\" data-lng=\"-74.0059728\">\n            <p>New York<\/p>\n            <p>This example demonstrates how to display multiple Google Map field values on the same map.<\/p>\n          <\/div>\n                  <\/div>\n    <script>\n      jQuery(document).ready(function($) {\n        $(\".acf-map\").each(function() {\n          const map = initMap($(this));\n          \/* if (window.acf &&) {\n            console.log('preview')\n            window.acf.addAction('render_block_preview\/type=map', initMap(map));\n          } *\/\n        });\n      });\n      \/**\n       * initMap\n       *\n       * Renders a Google Map onto the selected jQuery element\n       *\n       * @date    22\/10\/19\n       * @since   5.8.6\n       *\n       * @param   jQuery $el The jQuery element.\n       * @return  object The map instance.\n       *\/\n      function initMap($el) {\n        \/\/ Find marker elements within map.\n        const $markers = $el.find(\".marker\");\n\n        \/\/ Create gerenic map.\n        const lat = $el.data(\"lat\");\n        const lng = $el.data(\"lng\");\n\n        let mapArgs = {\n          zoom: $el.data(\"zoom\") || 16,\n          center: {\n            lat: parseFloat(lat),\n            lng: parseFloat(lng),\n          },\n          mapTypeId: google.maps.MapTypeId.ROADMAP,\n        };\n                  mapArgs.styles = [\r\n  {\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#f5f5f5\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"elementType\": \"labels.icon\",\r\n    \"stylers\": [\r\n      {\r\n        \"visibility\": \"off\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#616161\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"elementType\": \"labels.text.stroke\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#f5f5f5\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"administrative.land_parcel\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#bdbdbd\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#eeeeee\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#757575\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi.park\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#e5e5e5\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"poi.park\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#9e9e9e\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#ffffff\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road.arterial\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#757575\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road.highway\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#dadada\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road.highway\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#616161\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"road.local\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#9e9e9e\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"transit.line\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#e5e5e5\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"transit.station\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#eeeeee\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"water\",\r\n    \"elementType\": \"geometry\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#c9c9c9\"\r\n      }\r\n    ]\r\n  },\r\n  {\r\n    \"featureType\": \"water\",\r\n    \"elementType\": \"labels.text.fill\",\r\n    \"stylers\": [\r\n      {\r\n        \"color\": \"#9e9e9e\"\r\n      }\r\n    ]\r\n  }\r\n]          \n        const map = new google.maps.Map($el[0], mapArgs);\n\n        \/\/ Add markers.\n        map.markers = [];\n        $markers.each(function() {\n          initMarker(jQuery(this), map);\n        });\n\n        const markerCluster = new markerClusterer.MarkerClusterer({\n          markers: map.markers,\n          map\n        });\n\n        \/\/ Center map based on markers.\n        centerMap(map);\n\n        \/\/ Return map instance.\n        return map;\n      }\n\n      \/**\n       * initMarker\n       *\n       * Creates a marker for the given jQuery element and map.\n       *\n       * @date    22\/10\/19\n       * @since   5.8.6\n       *\n       * @param   jQuery $el The jQuery element.\n       * @param   object The map instance.\n       * @return  object The marker instance.\n       *\/\n      function initMarker($marker, map) {\n        \/\/ Get position from marker.\n        const lat = $marker.data(\"lat\");\n        const lng = $marker.data(\"lng\");\n        const latLng = {\n          lat: parseFloat(lat),\n          lng: parseFloat(lng),\n        };\n\n        \/\/ Create marker instance.\n        const marker = new google.maps.Marker({\n          position: latLng,\n          map: map,\n        });\n\n        \/\/ Append to reference for later use.\n        map.markers.push(marker);\n\n        \/\/ If marker contains HTML, add it to an infoWindow.\n        if ($marker.html()) {\n          \/\/ Create info window.\n          const infowindow = new google.maps.InfoWindow({\n            content: $marker.html(),\n          });\n\n          \/\/ Show info window when marker is clicked.\n          google.maps.event.addListener(marker, \"click\", function() {\n            infowindow.open(map, marker);\n          });\n        }\n        return marker;\n      }\n\n      \/**\n       * centerMap\n       *\n       * Centers the map showing all markers in view.\n       *\n       * @date    22\/10\/19\n       * @since   5.8.6\n       *\n       * @param   object The map instance.\n       * @return  void\n       *\/\n      function centerMap(map) {\n        \/\/console.log(map.markers)\n        \/\/ Create map boundaries from all map markers.\n        const bounds = new google.maps.LatLngBounds();\n        map.markers.forEach(function(marker) {\n          bounds.extend({\n            lat: marker.position.lat(),\n            lng: marker.position.lng(),\n          });\n        });\n\n        \/\/ Case: Single marker.\n        if (map.markers.length == 1) {\n          map.setCenter(bounds.getCenter());\n\n          \/\/ Case: Multiple markers.\n        } else {\n          map.fitBounds(bounds);\n        }\n      }\n    <\/script>\n  \n\n\n<div id=\"lmb_69ddae7536621\" class=\"map_block_leaflet\" style=\"height: 355px\"><\/div>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        function sanitize(str){\n            var text = document.createTextNode(str);\n            var p = document.createElement('p');\n            p.appendChild(text);\n            return p.innerHTML;\n        }\n        \n        var markers = [{\"latlng\":[51.51429786349476813711589784361422061920166015625,-0.062141418457031256938893903907228377647697925567626953125],\"label\":\"\",\"content\":\"Marker content\"},{\"latlng\":[51.49432997034483605602872557938098907470703125,-0.06688356399536134200278780781445675529539585113525390625],\"label\":\"\",\"content\":\"Marker content\"}];\n\n        \n        \n        var center = [51.505, -0.09];\n\n        var layer = L.tileLayer(\"https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/Canvas\/World_Light_Gray_Base\/MapServer\/tile\/{z}\/{y}\/{x}\", {\n\t\t\tattribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ'\n\t\t});\n\n        var map = L.map(\"lmb_69ddae7536621\", { center: center, layers: [layer]});\n        map.scrollWheelZoom.disable();\n \n        if(markers.length > 0) {\n            var clusters = L.markerClusterGroup({\n                zoomToBoundsOnClick: true\n            });\n\n            markers.forEach( function(marker) {\n                \n                if(marker.content) {\n                    const content = sanitize(marker.content)\n                    clusters.addLayer(L.marker(marker.latlng).bindPopup(content).addTo(map))\n                } else {\n                    clusters.addLayer(L.marker(marker.latlng).addTo(map))\n                }\n                \/\/clusters.addLayer(L.marker(marker.latlng));\n            })\n\n            const bounds = markers.map(function(marker) {\n                return marker.latlng\n            })\n\n            map.addLayer(clusters);\n\n            map.fitBounds(bounds, {padding: [50, 50]})\n        }\n\n        var container = document.getElementById(\"lmb_69ddae7536621\");\n        \n        var observer = ResizeObserver && new ResizeObserver(function() {\n            map.invalidateSize(true);\n        });\n\n        observer && observer.observe(container);\n    });\n<\/script>\n\n\n<div id=\"wpgmza_map\" class=\"wpgmza_map\" data-settings='{\"id\":\"1\",\"map_title\":\"My first map\",\"map_width\":\"100\",\"map_height\":\"400\",\"map_start_lat\":\"41.045473463785264\",\"map_start_lng\":\"-110.60652062500003\",\"map_start_location\":\"45.950464398418106,-109.81550500000003\",\"map_start_zoom\":\"4\",\"default_marker\":\"\",\"type\":\"1\",\"alignment\":\"4\",\"directions_enabled\":\"0\",\"styling_enabled\":\"0\",\"styling_json\":\"\",\"active\":\"0\",\"kml\":\"\",\"bicycle\":\"0\",\"traffic\":\"0\",\"dbox\":\"0\",\"dbox_width\":\"\",\"listmarkers\":\"0\",\"listmarkers_advanced\":\"0\",\"filterbycat\":\"0\",\"ugm_enabled\":\"0\",\"ugm_category_enabled\":\"0\",\"fusion\":\"\",\"map_width_type\":\"%\",\"map_height_type\":\"px\",\"mass_marker_support\":\"0\",\"ugm_access\":\"0\",\"order_markers_by\":\"0\",\"order_markers_choice\":\"0\",\"show_user_location\":\"0\",\"default_to\":\"\",\"other_settings\":{\"map_type\":1,\"sl_stroke_color\":\"\",\"sl_fill_color\":\"\",\"sl_stroke_opacity\":\"\",\"sl_fill_opacity\":\"\",\"transport_layer\":false,\"action\":\"wpgmza_save_map\",\"redirect_to\":\"\\\/wp-admin\\\/admin-post.php\",\"map_id\":\"1\",\"http_referer\":\"\\\/wp-admin\\\/admin.php?page=wp-google-maps-menu&amp;amp;action=edit&amp;amp;map_id=1\",\"wpgmza_id\":\"1\",\"wpgmza_start_location\":\"41.045473463785264,-110.60652062500003\",\"wpgmza_start_zoom\":\"4\",\"wpgmza_theme\":\"4\",\"wpgmza_theme_data\":\"[{\\\"featureType\\\":\\\"administrative\\\",\\\"elementType\\\":\\\"all\\\",\\\"stylers\\\":[{\\\"visibility\\\":\\\"on\\\"},{\\\"lightness\\\":33}]},{\\\"featureType\\\":\\\"landscape\\\",\\\"elementType\\\":\\\"all\\\",\\\"stylers\\\":[{\\\"color\\\":\\\"#f2e5d4\\\"}]},{\\\"featureType\\\":\\\"poi.park\\\",\\\"elementType\\\":\\\"geometry\\\",\\\"stylers\\\":[{\\\"color\\\":\\\"#c5dac6\\\"}]},{\\\"featureType\\\":\\\"poi.park\\\",\\\"elementType\\\":\\\"labels\\\",\\\"stylers\\\":[{\\\"visibility\\\":\\\"on\\\"},{\\\"lightness\\\":20}]},{\\\"featureType\\\":\\\"road\\\",\\\"elementType\\\":\\\"all\\\",\\\"stylers\\\":[{\\\"lightness\\\":20}]},{\\\"featureType\\\":\\\"road.highway\\\",\\\"elementType\\\":\\\"geometry\\\",\\\"stylers\\\":[{\\\"color\\\":\\\"#c5c6c6\\\"}]},{\\\"featureType\\\":\\\"road.arterial\\\",\\\"elementType\\\":\\\"geometry\\\",\\\"stylers\\\":[{\\\"color\\\":\\\"#e4d7c6\\\"}]},{\\\"featureType\\\":\\\"road.local\\\",\\\"elementType\\\":\\\"geometry\\\",\\\"stylers\\\":[{\\\"color\\\":\\\"#fbfaf7\\\"}]},{\\\"featureType\\\":\\\"water\\\",\\\"elementType\\\":\\\"all\\\",\\\"stylers\\\":[{\\\"visibility\\\":\\\"on\\\"},{\\\"color\\\":\\\"#acbcc9\\\"}]}]\",\"store_locator_enabled\":false,\"store_locator_search_area\":\"radial\",\"wpgmza_store_locator_radius_style\":\"legacy\",\"wpgmza_store_locator_default_radius\":\"10\",\"store_locator_auto_area_max_zoom\":\"\",\"store_locator_distance\":false,\"wpgmza_store_locator_position\":false,\"store_locator_show_distance\":false,\"store_locator_category\":false,\"wpgmza_store_locator_use_their_location\":false,\"wpgmza_store_locator_bounce\":false,\"wpgmza_sl_animation\":null,\"wpgmza_store_locator_hide_before_search\":false,\"store_locator_query_string\":\"\",\"store_locator_location_placeholder\":\"\",\"store_locator_default_address\":\"\",\"store_locator_name_search\":false,\"store_locator_name_string\":\"\",\"store_locator_not_found_message\":\"\",\"wpgmza_map_align\":\"1\",\"jump_to_nearest_marker_on_initialization\":false,\"automatically_pan_to_users_location\":false,\"override_users_location_zoom_level\":false,\"override_users_location_zoom_levels\":\"\",\"show_distance_from_location\":false,\"map_max_zoom\":\"21\",\"map_min_zoom\":\"0\",\"click_open_link\":false,\"fit_maps_bounds_to_markers\":false,\"fit_maps_bounds_to_markers_after_filtering\":false,\"hide_point_of_interest\":false,\"wpgmza_zoom_on_marker_click\":false,\"wpgmza_zoom_on_marker_click_slider\":\"\",\"close_infowindow_on_map_click\":false,\"disable_lightbox_images\":false,\"use_Raw_Jpeg_Coordinates\":false,\"polygon_labels\":false,\"disable_polygon_info_windows\":false,\"enable_marker_ratings\":false,\"only_load_markers_within_viewport\":false,\"iw_primary_color\":\"#000000\",\"iw_accent_color\":\"#000000\",\"iw_text_color\":\"#000000\",\"wpgmza_listmarkers_by\":\"0\",\"wpgmza_marker_listing_position\":false,\"wpgmza_push_in_map\":false,\"wpgmza_push_in_map_placement\":null,\"wpgmza_push_in_map_width\":\"\",\"wpgmza_push_in_map_height\":\"\",\"zoom_level_on_marker_listing_override\":false,\"zoom_level_on_marker_listing_click\":\"\",\"marker_listing_disable_zoom\":false,\"datatable_no_result_message\":\"\",\"remove_search_box_datables\":false,\"dataTable_pagination_style\":null,\"datatable_search_string\":\"\",\"datatable_result_start\":\"\",\"datatable_result_of\":\"\",\"datatable_result_to\":\"\",\"datatable_result_total\":\"\",\"datatable_result_show\":\"\",\"datatable_result_entries\":\"\",\"wpgmza_savemap\":\"Save Map \\u00bb\"}}' data-map-id='1' Data-maps-engine='google-maps' data-shortcode-attributes='{\"id\":\"1\"}' style=\"display:block; overflow:auto; width:100%; height:400px; float:left;\"><\/div>\n\n\n<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin&#8217; caught in the rain.)<\/p>\n<\/blockquote>\n\n\n\n<p>&#8230;or something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p>\n<\/blockquote>\n\n\n\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/denisdev.bertastrasse1.ch\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this: Hi there! I&#8217;m a bike messenger [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/denisdev.bertastrasse1.ch\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/denisdev.bertastrasse1.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/denisdev.bertastrasse1.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/denisdev.bertastrasse1.ch\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/denisdev.bertastrasse1.ch\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":13,"href":"https:\/\/denisdev.bertastrasse1.ch\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/denisdev.bertastrasse1.ch\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/denisdev.bertastrasse1.ch\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}