Download the PHP package lordsimal/bolt-geolocation-field without Composer
On this page you can find all versions of the php package lordsimal/bolt-geolocation-field. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download lordsimal/bolt-geolocation-field
More information about lordsimal/bolt-geolocation-field
Files in lordsimal/bolt-geolocation-field
Package bolt-geolocation-field
Short Description 📝 Bolt Extension to add the Geolocation FieldType
License MIT
Informations about the package bolt-geolocation-field
📝 Bolt Geolocation Field Extension
This Extension was written for BoltCMS 4
This extension allows you to use fields of type: geolocation
in your
ContentTypes, as defined in contenttypes.yaml
After that you will see a new config/extensions/bolt-geolocation.yaml
file.
In here you have to insert your Google Maps JS API Key, otherwise the field won't work correctly!
See more about the Google Maps JS API Key bellow.
After that you can create a new field with the fieldtype geolocation
Field can have autocompleteOptions key in order to set componentRestrictions for exemple
To see all options avalible, please refer you to google documentation
With that you can see the field in the backend:
You can search for places by selecting Search
and then typing your desired place
Or if you have Latitude and Longitude of your location you can input that via the
Latitude & Longitude
area.
As you can see in the GIF you need to click the Update Google Map
button when
inputting manual Latitude and Longitude.
You can also set the zoom level as you desire
Google Map API Key
If you don't already have an API key go to https://console.developers.google.com/ and create a new project.
After that you have to enable the following API's for this project:
- Maps JavaScript API
- This is needed to create Google Maps via JS
- Places API
- This is needed to have a nice search behaviour when your searching for places
After that you need to create an API Key via the Credentials Menu.
I would recommend you to restrict this key at least by HTTP referrers so only your website can use the API key.
This now generated API key needs to be inserted into your
config/extensions/bolt-geolocation.yaml
file.
Finally you will need to create a Billing Account under
https://console.cloud.google.com/billing AND link it to your previously
created API Console project
https://cloud.google.com/billing/docs/how-to/modify-project#confirm_billing_is_enabled_on_a_project
Google requires you to insert one, otherwise it won't work as desired.
See https://developers.google.com/maps/documentation/javascript/usage-and-billing for more information.
Why did I choose Google Map JS API instead of an embeded version?
Trust me, I tried to implement this without the need of an API key.
But unfortunately Google only allows 1 iFrame per page to be loaded. https://stackoverflow.com/questions/15388897/google-maps-inside-iframe-not-loading
Therefore you can't have multiple fields defined as type: geolocation
because
only the first one works and all the others won't.
And since there is (as far as I know) no Map Provider out there, which allows multiple embeded Maps without an API key I have chosen the most popular one.
Accessing the values in the frontend
Basically everything in the filed is saved inside a JSON.
BoltCMS returns that JSON as a string, therefore we have to decode it first.
- Record here is the current entry for the content type.
-
location is the name you have given the filed in the contenttypes.yaml
- location_json.selected is either search or latlong
- location_json.zoom is a value between 0 and 19
- location_json.search is the searchterm aka the searched location
- location_json.lat is the latitude value
- location_json.long is the longitude value
Outputting a simple embedded map with an iframe
If you don't want to output the map yourself with the Google Map JS API
you can use the data from above to output an embedded map via an iframe
I would recommend to you to set the following CSS in your application as well:
WARNING: Google only allows 1 iFrame per URL. See https://stackoverflow.com/questions/15388897/google-maps-inside-iframe-not-loading
Therefore if you need to output multiple maps on one page you will need to implement the Google Maps JS API for yourself in your frontend.
Running PHPStan and Easy Codings Standard
First, make sure dependencies are installed:
And then run ECS: