mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-16 06:26:27 +02:00
6888901468
* 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
43 lines
1.4 KiB
Markdown
43 lines
1.4 KiB
Markdown
---
|
|
title: How to Create a Google Maps Shortcode
|
|
summary: Learn how to embed a Google map in the WYSIWYG editor with a simple shortcode
|
|
icon: 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:
|
|
|
|
|
|
```html
|
|
[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**
|
|
|
|
```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
|
|
);
|
|
});
|
|
```
|