jonnitto/googlemaps

Last activity 22 days ago
  • 6
  • 3
  • 4880
composer require jonnitto/googlemaps

Google Maps as Content Element

3.4.0

Google Maps as Content Element

Homepage
https://github.com/jonnitto/Jonnitto.GoogleMaps
Version
3.4.0
Type
neos-plugin
Release Date
11.12.2020 21:52:36
Source
git
Distribution
zip
Requires
Requires (dev)
None
Suggest
None
Provides
None
Conflicts
None
Replaces
None
MIT
  • #flow
  • #map
  • #neos
  • #googlemaps
  • #contentelement
4b9637c48904c01c90cec197104013114e6f7f4c

Latest Stable Version Total Downloads License GitHub forks GitHub stars GitHub watchers GitHub followers Follow Jon on Twitter

Jonnitto.GoogleMaps Package for Neos CMS

With this package you can include Google Maps and / or Streetview and even Static Maps in a simple way into Neos CMS. Contributions are very welcome!

Installation

Most of the time you have to make small adjustments to a package (e.g. configuration in Settings.yaml). Because of that, it is important to add the corresponding package to the composer from your theme package. Mostly this is the site packages located under Packages/Sites/. To install it correctly go to your theme package (e.g.Packages/Sites/Foo.Bar) and run following command:

composer require jonnitto/googlemaps --no-update

The --no-update command prevent the automatic update of the dependencies. After the package was added to your theme composer.json, go back to the root of the Neos installation and run composer update. Et voilà! Your desired package is now installed correctly.

Google API

You'll need at least an API Key from Google, and if you want to use Static Maps, you need also a signing secret. Read here how to get these keys
You will need following APIs:

Modification

  • To set the options, use the global variable GoogleMapsOptions
  • To set the marker pin, use the global variable GoogleMapsPin
  • To include functions, use GoogleMapsFunction

In the Javscript of the package, following code gets executed:

if (typeof GoogleMapsPin === "string") {
    marker.icon = GoogleMapsPin;
} else if (typeof GoogleMapsPin === "object") {
    extend(marker, GoogleMapsPin);
}
        
if (typeof GoogleMapsFunction === "function") {
    GoogleMapsFunction();
}

if (typeof GoogleMapsOptions === "object") {
    extend(object.Map.options, GoogleMapsOptions);
}

if (typeof GoogleStreetviewOptions === "object") {
    extend(object.Streetview.options, GoogleStreetviewOptions);
}

Like that, you can do almost everything with the map.

Example: Custom pin

window.GoogleMapsFunction () => {
    window.GoogleMapsPin = {
        icon: {
            url: '/YOUR/PATH/TO/THE/MapPin.png',
            anchor: new google.maps.Point(10, 50),
            scaledSize: new google.maps.Size(22, 40)
        }
    };
}

or

window.GoogleMapsPin = '/YOUR/PATH/TO/THE/MapPin.png';

Example: Custom map options

window.GoogleMapsOptions = {
    streetViewControl: false,
    mapTypeControl: false,
    scrollwheel: false,
    styles: [
        {
            "elementType": "geometry",
            "stylers": [
                {
                    "color": "#f5f5f5"
                }
            ]
        }
    ]
};

License

Licensed under MIT, see LICENSE

The content of the readme is provided by Github
The same vendor provides 28 package(s).