README

Usage Example

At frontend (dark template required), simply add virtual tag to your form:

<dark:use bundle="spiral:google-maps-bundle"/>
...
<form:google-maps key="yourGoogleMapsAPIKey"
                    style="width: 100%; height: 300px;"
                    lat="53.9045398" lng="27.561524400000053"
                    name-lat="location[latitude]" name-lng="location[longitude]"
                    zoom="14" marker="true" editable="true" search="true"/>

The code above will be transformed into html and will add required javascript. Result html:

<div class="js-sf-google-maps"
data-key="yourGoogleMapsAPIKey"
style="width: 100%; height: 300px;"
data-lat="53.9045398" data-lng="27.561524400000053"
data-name-lat="location[latitude]" data-name-lng="location[longitude]"
data-zoom="10" data-marker="true" data-editable="true" data-search="true">...google's code...</div>

Browser output:

Options

key (required) -- Google Maps API key
lat (required) -- latitude
lng (required) -- longitude
name-lat (required) -- name for latitude data in hidden input (to send in form)
name-lng (required) -- name for longitude data in hidden input (to send in form)
zoom (optional, default = 13) -- initial zoom level
marker (optional, default = false) -- show marker
editable (optional, default = false) -- allow marker to be dragged
search (optional, default = false) -- show search input on map

Note

Please provide container size, because Google maps require some with and height of container. style="width: 100%; height: 300px;"

Installation

composer require spiral/google-maps
spiral register spiral/google-maps

Update

composer update spiral/google-maps
spiral publish spiral/google-maps

spiral / google-maps

Maintainers

Details