{"id":52882,"date":"2023-08-25T14:52:58","date_gmt":"2023-08-25T12:52:58","guid":{"rendered":"https:\/\/spoedposthaarlem.mindd.dev\/?page_id=52882"},"modified":"2023-08-25T14:53:00","modified_gmt":"2023-08-25T12:53:00","slug":"praktijken-map","status":"publish","type":"page","link":"https:\/\/spoedposthaarlem.nl\/fr\/praktijken-map\/","title":{"rendered":"Praktijken map"},"content":{"rendered":"\n\n\n\n\t<script type=\"text\/javascript\" src=\"https:\/\/maps.google.com\/maps\/api\/js?key=AIzaSyBxsHXPsm8IM_0p8CnaRLPpUXhPPMkHZWQ&libraries=geometry,places\"><\/script>\n\t<style type=\"text\/css\">\n\t\t#map_canvas {\n\t\t\twidth: 100%;\n\t\t\theight: 450px;\n\t\t}\n\n\t\t#result_list {\n\t\t\twidth: 100%;\n\t\t}\n\t<\/style>\n\t<\/head>\n\t<div class=\"map\">\n\t\t<div id=\"map_canvas\"><\/div>\n\t\t<form class=\"search-form search-form--practices map__form\">\n\t\t\t<h2 class=\"search-form__title\">Trouver mon cabinet m\u00e9dical le plus proche<\/h2>\n\t\t\t<input id=\"address\" class=\"search-form__field search-form__field--practices controls\" type=\"text\" placeholder=\"Ajoutez votre emplacement actuel\" \/>\n\t\t\t<select id=\"radius\" class=\"search-form__field search-form__field--practices\">\n\t\t\t\t<option>1 kilom\u00e8tres<\/option>\n\t\t\t\t<option>2 kilom\u00e8tres<\/option>\n\t\t\t\t<option>5 kilom\u00e8tres<\/option>\n\t\t\t\t<option>15 kilom\u00e8tres<\/option>\n\t\t\t\t<option>20 kilom\u00e8tres<\/option>\n\t\t\t\t<option>25 kilom\u00e8tres<\/option>\n\t\t\t\t<option>50 kilom\u00e8tres<\/option>\n\t\t\t\t<option>75 kilom\u00e8tres<\/option>\n\t\t\t\t<option>100 kilom\u00e8tres<\/option>\n\t\t\t\t<option>250 kilom\u00e8tres<\/option>\n\t\t\t\t<option>500 kilom\u00e8tres<\/option>\n\t\t\t<\/select>\n\t\t\t<input class=\"search-form__button search-form__button--practices\" type=\"button\" value=\"Recherche\" onclick=\"codeAddress()\"><br>\n\t\t<\/form>\n\t\t<div class=\"results\">\n\t\t\t<h2>R\u00e9sultats<\/h2>\n\t\t\t<ul id=\"result_list\" class=\"results__list no-dot\"><\/ul>\n\t\t<\/div>\n\n\t\t<noscript>\n\t\t\t<p><b>JavaScript must be enabled in order to use Google Maps.<\/b>\n\t\t\t\tHowever, it seems JavaScript is either disabled or not supported by your browser.\n\t\t\t\tTo view Google Maps, enable JavaScript by changing your browser options, and then\n\t\t\t\ttry again.<\/p>\n\t\t<\/noscript>\n\n\t\t<script>\n\t\t\tvar gmarkers = [];\n\t\t\tvar map = null;\n\t\t\tvar circle = null;\n\t\t\tvar geocoder = new google.maps.Geocoder();\n\t\t\tvar infowindow = new google.maps.InfoWindow({\n\t\t\t\tsize: new google.maps.Size(150, 50)\n\t\t\t});\n\t\t\tvar result_list_html = '';\n\n\t\t\tfunction createMarker(latlng, name, html, data) {\n\t\t\t\tconsole.log(data);\n\t\t\t\tvar contentString = html;\n\t\t\t\tvar marker = new google.maps.Marker({\n\t\t\t\t\tposition: latlng,\n\t\t\t\t\ttitle: name,\n\t\t\t\t\tstreet: data.street,\n\t\t\t\t\tpost_code: data.post_code,\n\t\t\t\t\tcity: data.city,\n\t\t\t\t\tphone: data.phone,\n\t\t\t\t\twebsite: data.website\n\t\t\t\t});\n\n\t\t\t\tmarker.addListener('click', function() {\n\t\t\t\t\tinfowindow.setContent(contentString);\n\t\t\t\t\tinfowindow.open(map, marker);\n\t\t\t\t});\n\n\t\t\t\tgmarkers.push(marker);\n\n\t\t\t\tvar markerIndex = gmarkers.length - 1;\n\n\t\t\t\tconst routeDescriptionHtml = '<a class=\"map__btn result__url btn\" target=\"_blank\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=' +\n\t\t\t\t\tencodeURIComponent(data.city) +\n\t\t\t\t\t'&destination_place_id=' +\n\t\t\t\t\tencodeURIComponent(data.id) +\n\t\t\t\t\t'\">Directions<\/a>';\n\n\n\t\t\t\tconst phoneHtml = data.phone ?\n\t\t\t\t\t`<span class=\"result__phone\"><a href=\"tel:${data.phone}\">T: ${data.phone}<\/a><\/span>` :\n\t\t\t\t\t'';\n\t\t\t\tvar sidebarLink = `<li class=\"result\">\n\t\t\t\t<h3 class=\"result__title\">\n\t\t\t\t\t<a href=\"javascript:showLocationInformation('${markerIndex}')\">${name}<\/a>\n\t\t\t\t<\/h3>\n\t\t\t\t<div class=\"result__content\">\n\t\t\t\t\t<address>\n\t\t\t\t\t\t<span class=\"result__street display--block\">${data.street}<\/span>\n\t\t\t\t\t\t<span class=\"display--block\">${data.post_code}, ${data.city}<\/span>\n\t\t\t\t\t<\/address>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"result__footer\">\n\t\t\t\t\t\t${phoneHtml}\n\t\t\t\t\t\t${routeDescriptionHtml}\n\t\t\t\t\t<a class=\"map__btn result__url btn\" target=\"_blank\" href=\"${data.website}\" rel=\"noopener\">Vers le site Web<\/a>\n\t\t\t\t<\/div>\n\t\t\t<\/li>`;\n\n\t\t\t\tresult_list_html += sidebarLink;\n\n\t\t\t\treturn marker; \/\/ Return the marker object\n\t\t\t}\n\n\t\t\tfunction showLocationInformation(i) {\n\t\t\t\tgoogle.maps.event.trigger(gmarkers[i], \"click\");\n\t\t\t}\n\n\t\t\tfunction initialize() {\n\t\t\t\t\/\/ phpcs:disable\n\n\t\t\t\t\n\n\t\t\t\tconst myOptions = {\n\t\t\t\t\tzoom: 12,\n\t\t\t\t\tcenter: new google.maps.LatLng(markers[0]['lat'], markers[0]['lng'])\n\t\t\t\t};\n\n\t\t\t\tmap = new google.maps.Map(document.getElementById(\"map_canvas\"), myOptions);\n\n\t\t\t\tconst input = document.getElementById(\"address\");\n\t\t\t\tconst searchBox = new google.maps.places.SearchBox(input);\n\n\t\t\t\tmap.addListener(\"bounds_changed\", () => {\n\t\t\t\t\tsearchBox.setBounds(map.getBounds());\n\t\t\t\t});\n\n\t\t\t\tgoogle.maps.event.addListener(map, \"click\", () => {\n\t\t\t\t\tinfowindow.close();\n\t\t\t\t});\n\n\t\t\t\tfor (let i = 0; i < markers.length; i++) {\n\t\t\t\t\tconst lat = parseFloat(markers[i].lat);\n\t\t\t\t\tconst lng = parseFloat(markers[i].lng);\n\t\t\t\t\tconst point = new google.maps.LatLng(lat, lng);\n\t\t\t\t\tconst id = markers[i].id;\n\t\t\t\t\tconst title = markers[i].title;\n\t\t\t\t\tconst data = markers[i];\n\t\t\t\t\tconst html = `<b>${title}<\/b><br>\n\t\t\t\t\t${data.street}<br>\n\t\t\t\t\t${data.post_code}<br>\n\t\t\t\t\t${data.city}<br>\n\t\t\t\t\t<b>Telefoon:<\/b> <a href=\"tel:${data.phone}\">${data.phone}<\/a><br>\n\t\t\t\t\t<a href=\"${data.website}\" target=\"_blank\">Website<\/a>`;\n\t\t\t\t\tcreateMarker(point, title, html, data); \/\/ Call createMarker here\n\t\t\t\t}\n\n\t\t\t\tconst bounds = new google.maps.LatLngBounds();\n\n\t\t\t\tgmarkers.forEach((marker, i) => {\n\t\t\t\t\tbounds.extend(marker.getPosition());\n\t\t\t\t\tmarker.setMap(map);\n\t\t\t\t});\n\n\t\t\t\tmap.fitBounds(bounds);\n\n\t\t\t\tdocument.getElementById(\"result_list\").innerHTML = result_list_html;\n\n\n\t\t\t}\n\n\t\t\tfunction generateLocationList() {\n\t\t\t\tconst bounds = map.getBounds();\n\t\t\t\tresult_list_html = gmarkers\n\t\t\t\t\t.filter(marker => bounds.contains(marker.getPosition()))\n\t\t\t\t\t.map((marker, i) => `<a href=\"javascript:showLocationInformation(${i})\">${marker.title}<\/a><br>`)\n\t\t\t\t\t.join('');\n\n\t\t\t\tdocument.getElementById(\"result_list\").innerHTML = result_list_html;\n\t\t\t}\n\n\t\t\tfunction codeAddress() {\n\t\t\t\tconst address = document.getElementById('address').value;\n\t\t\t\tconst radius = parseInt(document.getElementById('radius').value, 10) * 1000;\n\t\t\t\tresult_list_html = \"\";\n\t\t\t\tconsole.log(document.getElementById(\"result_list\"));\n\n\t\t\t\tif (address === '') {\n\t\t\t\t\tinitialize();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgeocoder.geocode({\n\t\t\t\t\t'address': address\n\t\t\t\t}, function(results, status) {\n\t\t\t\t\tif (status === google.maps.GeocoderStatus.OK) {\n\n\t\t\t\t\t\tconsole.log(results);\n\n\t\t\t\t\t\tconst searchCenter = results[0].geometry.location;\n\n\t\t\t\t\t\tif (circle) {\n\t\t\t\t\t\t\tcircle.setMap(null);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tcircle = new google.maps.Circle({\n\t\t\t\t\t\t\tcenter: searchCenter,\n\t\t\t\t\t\t\tradius: radius,\n\t\t\t\t\t\t\tfillOpacity: 0,\n\t\t\t\t\t\t\tstrokeOpacity: 0,\n\t\t\t\t\t\t\tfillColor: \"#FF0000\",\n\t\t\t\t\t\t\tmap: map\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\tconst bounds = new google.maps.LatLngBounds();\n\t\t\t\t\t\tlet foundMarkers = 0;\n\n\t\t\t\t\t\tgmarkers.forEach((marker, i) => {\n\t\t\t\t\t\t\tconst distance = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), searchCenter);\n\n\n\t\t\t\t\t\t\tlet phoneHtml = marker.phone ?\n\t\t\t\t\t\t\t\t`<span class=\"result__phone\"><a href=\"tel:${marker.phone}\">T: ${marker.phone}<\/a><\/span>` :\n\t\t\t\t\t\t\t\t'';\n\n\t\t\t\t\t\t\tlet routeDescriptionHtml = '<a class=\"map__btn result__url btn\" target=\"_blank\" href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&destination=' +\n\t\t\t\t\t\t\t\tencodeURIComponent(marker.city) +\n\t\t\t\t\t\t\t\t'&destination_place_id=' +\n\t\t\t\t\t\t\t\tencodeURIComponent(marker.id) +\n\t\t\t\t\t\t\t\t'\">Routebeschrijving<\/a>';\n\n\n\t\t\t\t\t\t\tif (distance < radius) {\n\t\t\t\t\t\t\t\tbounds.extend(marker.getPosition());\n\t\t\t\t\t\t\t\tmarker.setMap(map);\n\t\t\t\t\t\t\t\tresult_list_html += `<li class=\"result\">\n\t\t\t\t\t\t\t\t<h3 class=\"result__title\">\n\t\t\t\t\t\t\t\t\t<a href=\"javascript:showLocationInformation(${i})\">${marker.title}<\/a>\n\t\t\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\t\t<div class=\"result__content\">\n\t\t\t\t\t\t\t\t\t<address>\n\t\t\t\t\t\t\t\t\t\t<span class=\"result__street display--block\">${marker.street}<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"display--block\">${marker.post_code}, ${marker.city}<\/span>\n\t\t\t\t\t\t\t\t\t<\/address>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"result__footer\">\n\t\t\t\t\t\t\t\t\t\t${phoneHtml}\n\t\t\t\t\t\t\t\t\t\t${routeDescriptionHtml}\n\t\t\t\t\t\t\t\t\t<a class=\"map__btn result__url btn\" target=\"_blank\" href=\"${marker.website}\" rel=\"noopener\">Vers le site Web<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/li>`;\n\t\t\t\t\t\t\t\tfoundMarkers++;\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tmarker.setMap(null);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\tdocument.getElementById(\"result_list\").innerHTML = result_list_html;\n\n\t\t\t\t\t\tif (foundMarkers > 0) {\n\t\t\t\t\t\t\tmap.fitBounds(bounds);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tmap.fitBounds(circle.getBounds());\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\talert('Geocode was not successful for the following reason: ' + status);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t\tinitialize();\n\t\t<\/script>\n\t<\/div>\n\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_trash_the_other_posts":false,"editor_notices":[],"footnotes":""},"class_list":["post-52882","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Praktijken map - Spoedpost Haarlem - Fran\u00e7ais<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Praktijken map - Spoedpost Haarlem - Fran\u00e7ais\" \/>\n<meta property=\"og:url\" content=\"https:\/\/spoedposthaarlem.nl\/fr\/praktijken-map\/\" \/>\n<meta property=\"og:site_name\" content=\"Spoedpost Haarlem - Fran\u00e7ais\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T12:53:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/praktijken-map\\\/\",\"url\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/praktijken-map\\\/\",\"name\":\"Praktijken map - Spoedpost Haarlem - Fran\u00e7ais\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/#website\"},\"datePublished\":\"2023-08-25T12:52:58+00:00\",\"dateModified\":\"2023-08-25T12:53:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/praktijken-map\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/praktijken-map\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/praktijken-map\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Praktijken map\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/\",\"name\":\"Spoedpost Haarlem - Fran\u00e7ais\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/spoedposthaarlem.nl\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Praktijken map - Spoedpost Haarlem - Fran\u00e7ais","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"fr_FR","og_type":"article","og_title":"Praktijken map - Spoedpost Haarlem - Fran\u00e7ais","og_url":"https:\/\/spoedposthaarlem.nl\/fr\/praktijken-map\/","og_site_name":"Spoedpost Haarlem - Fran\u00e7ais","article_modified_time":"2023-08-25T12:53:00+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/spoedposthaarlem.nl\/fr\/praktijken-map\/","url":"https:\/\/spoedposthaarlem.nl\/fr\/praktijken-map\/","name":"Praktijken map - Spoedpost Haarlem - Fran\u00e7ais","isPartOf":{"@id":"https:\/\/spoedposthaarlem.nl\/fr\/#website"},"datePublished":"2023-08-25T12:52:58+00:00","dateModified":"2023-08-25T12:53:00+00:00","breadcrumb":{"@id":"https:\/\/spoedposthaarlem.nl\/fr\/praktijken-map\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/spoedposthaarlem.nl\/fr\/praktijken-map\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/spoedposthaarlem.nl\/fr\/praktijken-map\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/spoedposthaarlem.nl\/fr\/"},{"@type":"ListItem","position":2,"name":"Praktijken map"}]},{"@type":"WebSite","@id":"https:\/\/spoedposthaarlem.nl\/fr\/#website","url":"https:\/\/spoedposthaarlem.nl\/fr\/","name":"Spoedpost Haarlem - Fran\u00e7ais","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/spoedposthaarlem.nl\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/spoedposthaarlem.nl\/fr\/wp-json\/wp\/v2\/pages\/52882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spoedposthaarlem.nl\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spoedposthaarlem.nl\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spoedposthaarlem.nl\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/spoedposthaarlem.nl\/fr\/wp-json\/wp\/v2\/comments?post=52882"}],"version-history":[{"count":0,"href":"https:\/\/spoedposthaarlem.nl\/fr\/wp-json\/wp\/v2\/pages\/52882\/revisions"}],"wp:attachment":[{"href":"https:\/\/spoedposthaarlem.nl\/fr\/wp-json\/wp\/v2\/media?parent=52882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}