Als je vaak gebruik maakt van Google Maps op je sites, of simpelweg op zoek bent naar een makkelijkere manier om kaarten in blog berichten en op pagina’s te embedden, dan is het creëren van je eigen shortcode voor Google Maps de ideale oplossing.
Eerst maak je een map aan getiteld my-google-maps-shortcode in de “plugins” directory van je site.
In die map zet je een bestand genaamd my-google-maps-shortcode.php. Daarin plak je de onderstaande code:
/**<?php
* Plugin Name: My Google Maps Shortcode
* Plugin URI: http://danielpataki.com
* Description: Allows users to add flexible Google Maps to post content
* Version: 1.0.0
* Author: Daniel Pataki
* Author URI: http://danielpataki.com
* License: GPL2
*/
Nu kun je de plugin in WordPress activeren en aan de slag gaan. In dit tutorial maken we gebruik van deze basic plugin.
We maken gebruik van de Google Maps JavaScript API. Je hebt hiervoor een gratis API key nodig. Zodra je die hebt, zijn er drie dingen die je moet doen:
- Het Google Maps JavasScript linken
- Een leeg element voor de kaart creëren
- Een kaart in het element creëren met JavaScript
Het Google Maps JavasScript linken
Het algemene formulier is http://maps.googleapis.com/maps/api/js?key=API_KEY8&callback=initMap.
Om dit script aan te roepen gebruiken we de wp_enqueue_scripts hook in onze plugin.
add_action( ‘admin_enqueue_scripts’, ‘mgms_enqueue_assets’ );
function mgms_enqueue_assets() {
wp_enqueue_script(
‘google-maps’,
‘//maps.googleapis.com/maps/api/js?key=AIzaSyAzXoaC9OV09c-sTdIWWR1hWzUcJppx_g8&callback=initMap’,
array(),
‘1.0’,
true
);
}
Zoals je kunt zien zijn het protocol (http) en de colon weggelaten. Dit is aan te raden omdat de aanvraag het veel veiligere HTTPS zal gebruiken als je site daarvan gebruik maakt. Zo niet, dan zal hij terugvallen op HTTP.
Een leeg element voor de kaart creëren
De onderstaande shortcode produceert alleen het lege element:
add_shortcode( ‘map’, ‘mgms_map’ );
function mgms_map( $args ) {
$id = substr( sha1( “Google Map” . time() ), rand( 2, 10 ), rand( 5, 8 ) );
return “<div class=’map’ id=’map-$id’></div>”;
}
Zoals je kunt zien is er voor elk element een unieke ID gecreëerd. Dit is om er zeker van te zijn dat het JavaScript het later kan targeten. Uiteindelijk moet ons lege element er ongeveer zo uitzien:
<div class=”map” id=”map-7f51e”></div>
Een kaart in het element creëren met JavaScript
Nu gaan we een specifieke locatie toevoegen met harde JavaScript code. De onderstaande code zal een kaart weergeven die gecentreerd is op het Yellowstone National Park in Wyoming:
add_shortcode( ‘map’, ‘mgms_map’ );
function mgms_map( $args ) {
$id = substr( sha1( “Google Map” . time() ), rand( 2, 10 ), rand( 5, 8 ) );
ob_start();
?>
<div class=’map’ style=’height:300px; margin-bottom: 1.6842em’ id=’map-<?php echo $id ?>’></div>
<script type=’text/javascript’>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map-<?php echo $id ?>’), {
center: {lat: 44.6000, lng: -110.5000},
zoom: 8
});
}
</script>
<?php
$output = ob_get_clean();
return $output;
}
Ons JavaScript bevat een functie die initMap heet. De functie creëert een nieuw google.maps.Map object en geeft hier het element en enkele parameters aan door. De twee parameters die we gebruiken zijn “center” (dat het middelpunt van de kaart definieert) en “zoom” (dat de zoom definieert).
Nu hoeven we alleen nog maar de parameters aan de shortcode toe te voegen. Als je dit in de praktijk gaat toepassen, kun je natuurlijk het beste een apart CSS bestand aanmaken.
Zoals je ziet is het creëren van functionaliteiten met shortcodes best makkelijk, zeker als je gebruik maakt van APIs zoals Google Maps. Er is natuurlijk nog veel ruimte voor verbetering, zoals het gebruiken van adressen in plaats van coördinaten en het toevoegen van Google Street View. Maar met deze basis kom je al een heel eind!
