Plugin: Styled Google Map – Tag and Page Methods

Kirby CMS Tag and Page Method to print a regular or styled google map.

NOTE: This is not a free plugin. In order to use it on a production server, you need to buy a license.

Key Features

  • add your styling JSON
  • turn on/off google controls
  • simple customization using config and snippets
  • add more than one marker
  • marker can have custom marker icon image
  • marker can have info window (open on click or allready opened)
  • marker can open URL on click
  • example code shows how to create custom text labels with svg using a route
  • works out-of-the box with @AugustMiller Kirby Map Field Plugin.

https://github.com/bnomei/kirby-styledmap

5 Likes

hi @steenweg, i moved your question here.

what step exactly are you stuck at?

kirby tag
once you have installed the plugin you can use the styledmap kirby tag inside the panel (inside any content textarea) so no php required at all. if you want styling you can either upload a json file to the content folder or create a snippet. the snippet does not contain any real php mostly just the json – see example provided.

config
of course you still have to get an google map api key and add it to your /site/config/config.php.

Hi @bnomei,

thank you very much for your kind response! I didn´t want to sound rude, the error is on my side: I completely oversaw, that your plugin gives me a tag, that I can use in panel text fields. Now I see, how to use your examples that I erroneously described as “pseudo-code”.

Now its up to me, to use it the right way: I have an overview page/template “projects” with many children “project”. I would like to show a map on the overwiew page with markers for all children. I think, I have to build a snippet, looping through all children and collecting lat, lng, title and a link. Building this multi-dimensional associative array will be the real challenge for me.

Thanks again

Thomas

  • you need to replace title with something like $page->title()->value() or another field
  • you can omit/delete the icon and info if you do not need them

try something like this.

$markers = array();
foreach($projects as $project) {
    // custom
    $markers[] = 
        [	'title' => 'Makaiwa Beach Park', // $project->title()->value()
            'lat' 	=> 21.347355, 
            'lng' 	=> -158.127777, 
            // get an icon from somewhere. could be a svg too.
            'icon'	=> site()->url() . '/assets/plugins/kirby-styledmap/sm-example-icon.svg',
            // open url on click
            'info'	=> 'https://www.google.de/maps/place/Makaha+Beach+Park/@21.3569219,-158.1442995,12z',
        ];

    // or with kirby tag field (named in my case 'location')
    $projectmarker = 
        [	'title' => 'Makaiwa Beach Park', 
            // get an icon from somewhere. could be a svg too.
            'icon'	=> site()->url() . '/assets/plugins/kirby-styledmap/sm-example-icon.svg',
            // open url on click
            'info'	=> 'https://www.google.de/maps/place/Makaha+Beach+Park/@21.3569219,-158.1442995,12z',
        ];
    $markers[] = array_merge($projectmarker, $project->location()->yaml()); // https://github.com/AugustMiller/kirby-map-field#usage
}
echo a::json($markers);

Hi @bnomei,

this looks very promising, thank you so much! I will try it, as soon as possible - for the next hours I´m traveling by train with very spotty internet access.

once you added the google api key to your config you could give the example route a try to check if everything is working.

The example route works already, no problems so far. I had the Google api key already installed for the Kirby Map Field Plugin.

Hi Bruno,

just bought the license, will definitively use your plugin. This code works as a charm

<?php
$markers = array();
foreach(kirby()->site()->pages()->find('projekte')->children()->visible() as $projekt) {
  $projektmarker = [	'title' => 'Some Title',
                      'info' => 'Some Info',
                    ];
  $markers[] = array_merge($projektmarker, $projekt->location()->yaml());
}
echo a::json($markers);
?>

But, as soon as I try to read some information from “$projekt” into ‘title’ or ‘info’

'title' => $projekt->title()

I get this nasty error

Undefined property: Page::$title

Don´t understand this…

your blueprint needs to have the title field. did you create a custom blueprint for children of projekte? if you did check spelling title not titel.

you could also try to just use the value

$projektmarker = [	
  'title' => $projekt->title()->value(),
  'info' => 'Some Info',
];

Hi,

that solved it! My blueprint contains the “Title” field, it was the missing “->value()” statement.

Thanks a lot, have a nice weekend

Thomas

ah yes. the field object can not be converted into a string when calling a::json – thats why $field->value() is needed. you could also wrap it into a trim($field) etc. to trigger string conversion.

Sorry, wrong post…

still got the automated email. :grin:
fixed and released version 0.5.2

Hi bnomei,

me, again :frowning:

I finished the beta of the site I´m working on. Runs without problems locally on my Mac with MAMP.

On the test server, I get a nasty error from your plugin: „unexpected end of file“

This is the URL

http://stiftung.st.eenweg.de/aktuell/projektfoerderung-schwarzwilduebungsgatter-fuer-jagdgebrauchshunde-bei-aufsess

Attached 2 screenshots, one from the local site, one from the test server.

Would be great, if you could have a look into this

Many thanks

Thomas

yes. texnix found that already. another php short-tag on line 91.
fixed. just use cli to update.

kirby plugin:update bnomei/kirby-styledmap