silverstripe-framework/docs/en/02_Developer_Guides/05_Extending/How_Tos/02_Create_a_Google_Maps_Shortcode.md
Aaron Carlino 6888901468
NEW: Update docs to be compliant with Gatsby site (#9314)
* First cut

* Temporarily disable composer.json for netlify build

* POC

* New recursive directory query, various refinements

* Fix flexbox

* new styled components plugin

* Apply frontmatter delimiters

* Mobile styles, animation

* Search

* Redesign, clean up

* Nuke the cache, try again

* fix file casing

* Remove production env file

* ID headers

* Move app to new repo

* Add frontmatter universally

* Hide children changelogs

* Add how to title

* New callout tags

* Revert inline code block change

* Replace note callouts

* Fix icons

* Repalce images

* Fix icon

* Fix image links

* Use proper SQL icon
2019-11-18 17:58:33 +13:00

1.4 KiB

title summary icon
How to Create a Google Maps Shortcode Learn how to embed a Google map in the WYSIWYG editor with a simple shortcode map

How to Create a Google Maps Shortcode

To demonstrate how easy it is to build custom shortcodes, we'll build one to display a Google Map based on a provided address. We want our CMS authors to be able to embed the map using the following code:

[googlemap,width=500,height=300]97-99 Courtenay Place, Wellington, New Zealand[/googlemap]

So we've got the address as "content" of our new googlemap shortcode tags, plus some width and height arguments. We'll add defaults to those in our shortcode parser so they're optional.

app/_config.php

use SilverStripe\View\Parsers\ShortcodeParser;
 
ShortcodeParser::get('default')->register('googlemap', function($arguments, $address, $parser, $shortcode) {
    $iframeUrl = sprintf(
        '//maps.google.com/maps?q=%s&hnear=%s&ie=UTF8&hq=&t=m&z=14&output=embed',
        urlencode($address),
        urlencode($address)
    );

    $width = (isset($arguments['width']) && $arguments['width']) ? $arguments['width'] : 400;
    $height = (isset($arguments['height']) && $arguments['height']) ? $arguments['height'] : 300;

    return sprintf(
        '<iframe width="%d" height="%d" src="%s" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>',
        $width,
        $height,
        $iframeUrl
    );
});