{"id":769,"date":"2023-01-08T11:01:21","date_gmt":"2023-01-08T10:01:21","guid":{"rendered":"https:\/\/rekersmegens.nl\/fietstochten_jan\/?page_id=769"},"modified":"2023-12-12T13:36:56","modified_gmt":"2023-12-12T12:36:56","slug":"uitleg-over-mapsgpx","status":"publish","type":"page","link":"https:\/\/rekersmegens.nl\/fietstochten_jan\/uitleg-over-mapsgpx\/","title":{"rendered":"Uitleg over MapsGPX"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ik heb een kleine WordPress plugin <strong>Maps GPX<\/strong> ontwikkeld waarmee het mogelijk wordt om een Google Maps kaartje in een WordPress pagina of bericht op te nemen waarbij er in de kaart een route en\/of een stel markers getoond wordt. De lezer kan dan vrijelijk in en uitzoomen in de kaart. Dat is fijner dan een ingeplakte schermprint. Dat levert je dus zoiets op:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div id=\"64793fc\" style=\"height: 400px;\">Hier moet een kaart staan<\/div>\n<script>storeDivNameMap(\"64793fc\"); <\/script>\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyAbMCthpNu2vNxqvW_JqwZIc2uARshEXvI&amp;callback=initMap&amp;libraries=drawing&amp;v=weekly\" async=\"\" defer=\"\" ><\/script>\n<script>storeMarkersFile(\"\"); <\/script>\n<script>storeRouteFile(\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/actual-2023-01-07.gpx\"); <\/script>\n<script>storeRouteTotaalFile(\"\"); <\/script>\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deze plugin is nog erg rudimentair en vooral voor eigen gebruik. Hier leg ik (vooral mezelf) uit hoe de plugin geinstalleerd en gebruikt kan worden.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Stap 1 &#8211; Installeer de Maps GPX plugin<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Gebruik Filezilla om in te loggen op de WordPress site bij je provider en ga naar de folder <strong>wp_content\/plugins<\/strong>. Maak daar een folder <strong>mapsgpx <\/strong>aan, en zet twee files in die folder: <strong>gpxmaps-plugin.php<\/strong> en <strong>showpgpx_functions.js<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"413\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_filezilla-1024x413.jpg\" alt=\"\" class=\"wp-image-770\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_filezilla-1024x413.jpg 1024w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_filezilla-300x121.jpg 300w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_filezilla-768x310.jpg 768w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_filezilla.jpg 1081w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">schermprint filezilla met mapsgpx folder<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nu moet er in je WordPress Plugin overzicht een mapsgpx plugin verschenen zijn.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"218\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-1024x218.jpg\" alt=\"\" class=\"wp-image-771\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-1024x218.jpg 1024w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-300x64.jpg 300w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-768x163.jpg 768w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-1536x326.jpg 1536w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins.jpg 1576w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Hier is de gpxmaps plugin verschenen in het Plugins overzicht<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Stap 2 &#8211; vul je Google Maps API key in<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">In WordPress is er nu <strong>onder Instellingen een Maps GPX pagina<\/strong> verschenen. Hier moet je je eigen Google Maps API key invullen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"357\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_settings_mapsgpx-1-1024x357.jpg\" alt=\"\" class=\"wp-image-773\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_settings_mapsgpx-1-1024x357.jpg 1024w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_settings_mapsgpx-1-300x105.jpg 300w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_settings_mapsgpx-1-768x268.jpg 768w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_settings_mapsgpx-1.jpg 1354w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Vul onder Instellingen\/Mapx GPX je eigen Maps API key in<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Stap 3 &#8211; Zorg dat je GPX files kunt uploaden in Media<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">In WordPress is het nog niet mogelijk om gpx files te uploaden omdat dit MIME type niet bekend is. Dat kun je aanpassen met de Plugin <strong>File Upload Types<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"218\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-1024x218.jpg\" alt=\"\" class=\"wp-image-771\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-1024x218.jpg 1024w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-300x64.jpg 300w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-768x163.jpg 768w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins-1536x326.jpg 1536w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_wordpress_plugins.jpg 1576w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Installeer de plugin <strong>File Upload Types<\/strong> van <strong>WPForms<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open de <strong>Settings<\/strong> van deze plugin. Onderin de pagina staat <strong>Add Custom File Types<\/strong>. Vul daar in<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Description: <strong>GPS exchange format<\/strong><\/li>\n\n\n\n<li>MIME type: <strong>text\/xml<\/strong><\/li>\n\n\n\n<li>Extension: <strong>.gpx<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dat levert je dan dit op:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"212\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_file_upload_types-1024x212.jpg\" alt=\"\" class=\"wp-image-774\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_file_upload_types-1024x212.jpg 1024w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_file_upload_types-300x62.jpg 300w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_file_upload_types-768x159.jpg 768w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_file_upload_types.jpg 1475w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">stap 4 &#8211; Gebruik de mapsgpx plugin<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Ten eerste moet je een gpx file (daar moet je zelf voor zorgen) uploaden in je Media bibliotheek.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hier zie je wat van mijn eigen uploads in mijn media bibliotheek.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"549\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_media_bibliotheek.jpg\" alt=\"\" class=\"wp-image-775\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_media_bibliotheek.jpg 1018w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_media_bibliotheek-300x162.jpg 300w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_media_bibliotheek-768x414.jpg 768w\" sizes=\"auto, (max-width: 1018px) 100vw, 1018px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ten tweede kun je in een pagina of bericht een stukje tekst als dit opnemen<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"477\" height=\"46\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_mapsgpx_aanroep.jpg\" alt=\"\" class=\"wp-image-781\" style=\"width:250px\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_mapsgpx_aanroep.jpg 477w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_mapsgpx_aanroep-300x29.jpg 300w\" sizes=\"auto, (max-width: 477px) 100vw, 477px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dat is dus:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>[<\/strong><\/li>\n\n\n\n<li><strong>mapsgpx<\/strong><\/li>\n\n\n\n<li><strong>route=&#8217;actual 2023-01-07&#8242;<\/strong><\/li>\n\n\n\n<li><strong>]<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Hierbij is &#8216;actual 2023-01-07&#8217; de naam waaronder het media bestand is opgeslagen, dus niet de filenaam zelf.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je kunt ook opnemen <strong>markers=&#8217;markers_NL_BE&#8217;<\/strong> om een stel markers in te laten plakken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bovenstaande levert in je pagina op (als schermprint):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_getoonde_kaart-1024x662.jpg\" alt=\"\" class=\"wp-image-776\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_getoonde_kaart-1024x662.jpg 1024w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_getoonde_kaart-300x194.jpg 300w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_getoonde_kaart-768x497.jpg 768w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_getoonde_kaart.jpg 1325w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Alternatief: gebruik maps-gpx block<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Ik heb ook een eigen Gutenberg block aangemaakt, waarmee het inplakken van een kaartje iets makkelijker is. Dan krijg je als pagina schrijver dit invulscherm waarin je ziet wat je moet invullen om een kaartje te tonen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"1024\" src=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_maps_gpx_block-969x1024.jpg\" alt=\"\" class=\"wp-image-844\" srcset=\"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_maps_gpx_block-969x1024.jpg 969w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_maps_gpx_block-284x300.jpg 284w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_maps_gpx_block-768x812.jpg 768w, https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-content\/uploads\/2023\/01\/schermprint_maps_gpx_block.jpg 1107w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ik heb helaas wel weer een nieuwe plugin moeten installeren om dit custom block te kunnen definieren (Genesis Custom Blocks). Het lukt me niet om daarin gemaakte block definitie te exporteren zodat anderen dit ook zouden kunnen gebruiken. Verder kent de WordPress App dit soort custom blocks niet, ze werken alleen in de website. Beetje suf dus wel.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Aanpassing maken?<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Als je een aanpassing aan de plugin wilt maken:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>pas de files <em>gpxmaps-plugin.php<\/em> en <em>showgpx_function.js<\/em> aan, en doe dit zodanig dat oudere pagina&#8217;s, die de plugin al gebruikten, blijven werken. Ik vermoed dat je ook het versienummer van de plugin moet wijzigen.<\/li>\n\n\n\n<li>upload ze met Filezilla naar de juiste wordpress plugin folder<\/li>\n\n\n\n<li>wijzig in WordPress, in het <em>Custom Block voor maps-gpx<\/em>, hetgeen getoond wordt (tab 1) en hoe dat vertaald moet worden naar de onderliggende echte plugin (tab 2)<\/li>\n\n\n\n<li>test of alles werkt.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Ik heb een kleine WordPress plugin Maps GPX ontwikkeld waarmee het mogelijk wordt om een Google Maps kaartje in een WordPress pagina of bericht op te nemen waarbij er in de kaart een route en\/of een stel markers getoond wordt. De lezer kan dan vrijelijk in en uitzoomen in de kaart. Dat is fijner dan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-769","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-json\/wp\/v2\/pages\/769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-json\/wp\/v2\/comments?post=769"}],"version-history":[{"count":14,"href":"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-json\/wp\/v2\/pages\/769\/revisions"}],"predecessor-version":[{"id":1302,"href":"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-json\/wp\/v2\/pages\/769\/revisions\/1302"}],"wp:attachment":[{"href":"https:\/\/rekersmegens.nl\/fietstochten_jan\/wp-json\/wp\/v2\/media?parent=769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}