fanningert / kirbycms-extension-gmaps

This is a Kirbytag to integrate Google Maps API in your website
GNU General Public License v3.0
10 stars 2 forks source link

Step-by-Step, Simple Instructions for Newbies Needed #14

Closed luxlogica closed 8 years ago

luxlogica commented 8 years ago

This seems like a great plugin, but I just can't get it up and running. Following your instructions, I get the following PHP error...:

PHP Fatal error:  Undefined constant 'at\fanninger\kirby\extension\gmaps\GMaps'

...triggered in the head element my php template, when it tries to add the Google Maps JS API, as per your instructions:

<script src="<?php echo at\fanninger\kirby\extension\gmaps\GMaps.getGoogleMapsJSApiUrl(); ?>"></script>

Kirby doesn't seem to be loading your plugin(s), and I'm pretty certain I'm doing something silly in the installation...

Installation instructions seem extremely terse and brief - specially for newbies or occasional users, like me. Please remember, that new, inexperienced and casual developers are a good part of Kirby's market. You need "ELI5"-style docs. Here are a couple of suggestions:

  1. There are many new developers that do not use git, so it would be extremely helpful if you could add instructions for manually downloading and placing all necessary files and folders in their right location, with the right name.
  2. If there is a dependency on another plugin, then the instructions for downloading and installing the other plugin should also be just as clear - or installation will fail for both.
  3. Explain what the plugin does in simple and non-technical terms - such as: "this plugin allows your users to generate a Google Map simply by using a new 'googlemaps' kirbytag in their kirbytext fields. It also allows you to generate Google Maps directly in your template, using PHP!"
  4. Give a full example, step-by-step, of all use-cases. In this instance, give examples of how the user would use the new kirbytag to generate a complete map, with a marker, at a custom address. Then also give a full example of how a developer would display a complete Google Map, with a marker, for a custom address, in their template.

Better documentation may help wider adoption of this plugin. It seems to be quite full-featured, but until people are very clear on how to install and use it, its harshly brief documentation may prove to be too much of a stumbling block.

fanningert commented 8 years ago

Thank you your issue. How did you installed this plugin. Via GIT or download of ZIP file? Your installation directory should look like following.

{kirby_installation}
- site
  - plugins
    - kirbycms-extension-webhelper
      - kirbycms-extension-webhelper.php
      - ....
    - kirbycms-extension-gmaps
      - kirbycms-extension-gmaps.php
      - ....

Did you get any other error messages?

Here the short manual install instruction.

  1. Download the repository as zip. Download
  2. Create a directory kirbycms-extension-gmaps in the directory {kirby}/site/plugins.
  3. Extract the ZIP in this new directory.
  4. Follow the template install instruction in the documentation.
  5. Download install the plugin kirbycms-extension-webhelper on the same way.

You're right, the documentation is not really a masterpiece. I will update the documentation in the next weeks.

luxlogica commented 8 years ago

Thank you for your quick feedback, @fanningert! I will try to post the steps I followed for my installation below - and perhaps you can use them as a starter point for the installation instructions in your docs! ;-)

Installation Instructions

  1. Click here to download the latest version of the WebHelper extension. Unzip it, and rename the folder "kirbycms-extension-webhelper".
  2. Click here to download the latest version of the GMaps extension. Unzip it, and rename the folder "kirbycms-extension-gmaps".
  3. Put both folders inside {{kirby folder}}/site/plugins.
  4. Move the file kirbycms-extension-gmaps/assets/js/gmaps.js to {{kirby}}/assets/js/gmaps.js. You should end up with a file structure like this:
{{kirby folder}}
  - assets
    - js
      - gmaps.js
  - site
    - plugins
      - kirbycms-extension-gmaps
        - kirbycms-extension-gmaps.php
      - kirbycms-extension-webhelper
        - kirbycms-extension-webhelper.php

Last of all, in the head section of your template, load jQuery, the GoogleMaps API and the gmaps.js script, like this:

<!-- loading jQuery from CDN -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

<!-- loading the GoogleMaps API -->
<script src="<?php echo at\fanninger\kirby\extension\gmaps\GMaps.getGoogleMapsJSApiUrl(); ?>"></script>

<!-- loading the GMaps script -->
<?php echo js('assets/js/gmaps.js'); ?>

Unfortunately, these instructions simply don't work: I get the 'undefined constant' php error mentioned above, when the web page tries to load the GoogleMaps API. I just downloaded a fresh Kirby starterkit, followed these instructions, and got exactly the same error. When I look at the page source, I can see clearly that it is the 'GMaps' extension that is not loading:

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <title>Kirby Starterkit | Home</title>
  <meta name="description" content="This is Kirby's Starterkit.">
  <meta name="keywords" content="Kirby, CMS, file-based">

  <link rel="stylesheet" href="http://test.kirby/assets/css/main.css">  
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="

What am I doing wrong?

fanningert commented 8 years ago

After my work, I will test it with the Kirby Starterkit.

fanningert commented 8 years ago

I think with the current version the php are not loaded from kirby. The easiest step for a short solution is to replace <?php echo at\fanninger\kirby\extension\gmaps\GMaps.getGoogleMapsJSApiUrl(); ?> with https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places&callback=initialize.

I will test the plugin for a reuse with the static method.

fanningert commented 8 years ago

Ok, I found the "simple" problem.

Replace

<?php echo at\fanninger\kirby\extension\gmaps\GMaps.getGoogleMapsJSApiUrl(); ?>

with

<?php echo at\fanninger\kirby\extension\gmaps\GMaps::getGoogleMapsJSApiUrl(); ?>