Developed with love by KnpLabs Hire us for your project!
46

OhGoogleMapFormTypeBundle

by ollietb

Set latitude and longitude values on a form using Google Maps

OhGoogleMapFormTypeBundle

Set latitude and longitude values on a form using Google Maps. The map includes a search field and a current location link. When a pin is placed or dragged on the map, the latitude and longitude fields are updated.

Installation

This bundle is compatible with Symfony 2.1. Add the following to your composer.json:

"oh/google-map-form-type-bundle": "dev-master"

Register the bundle in your app/AppKernel.php:

// app/AppKernel.php
public function registerBundles()
    {
        $bundles = array(
            new Oh\GoogleMapFormTypeBundle\OhGoogleMapFormTypeBundle(),
            // ...

You might need to change a couple of options if you are trying to use Symfony 2.0

Add OhGoogleMapFormTypeBundle to assetic
```yaml

app/config/config.yml

Assetic Configuration

assetic:
bundles: [ 'OhGoogleMapFormTypeBundle' ]

...

oh_google_map_form_type:
api_key: "%google_maps_api_key%"
```

Usage

This bundle contains a new FormType called GoogleMapType which can be used in your forms like so:

$builder->add('latlng', 'oh_google_maps');

On your model you will have to process the latitude and longitude array

// Your model eg, src/My/Location/Entity/MyLocation.php
use Symfony\Component\Validator\Constraints as Assert;
use Oh\GoogleMapFormTypeBundle\Validator\Constraints as OhAssert;

class MyLocation
{
    // ... include your lat and lng fields here

    public function setLatLng($latlng)
    {
        $this->setLat($latlng['lat']);
        $this->setLng($latlng['lng']);
        return $this;
    }

    /**
     * @Assert\NotBlank()
     * @OhAssert\LatLng()
     */
    public function getLatLng()
    {
        return array('lat'=>$this->getLat(),'lng'=>$this->getLng());
    }

}

Include the twig template for the layout. It's generally a good idea to overwrite the form template in your own twig template

# your config.yml
twig:
    form:
        resources:
            # This uses the default - you can put your own one here
            - 'OhGoogleMapFormTypeBundle:Form:fields.html.twig'

If you are intending to override some of the elements in the template then you can do so by extending the default google_maps.html.twig. This example adds a callback to the javascript when a new map position is selected.

{# your template which is inluded in the config.yml (above) 
   eg src/My/Location/Resources/views/Form/fields.html.twig #}
{% extends "OhGoogleMapFormTypeBundle:Form:google_maps.html.twig" %}
{% block oh_google_maps_callback %}
        <script type="text/javascript">
            var oh_google_maps_callback = function(location, gmap){
                // logs to the console your new latitude
                console.log('Your new latitude is: '+location.lat());
            }
        </script>   
{% endblock %}

Options

There are a number of options, mostly self-explanatory

array(
    'type'           => 'text',  // the types to render the lat and lng fields as
    'options'        => array(), // the options for both the fields
    'lat_options'    => array(), // the options for just the lat field
    'lng_options'    => array(), // the options for just the lng field
    'addr_options'   => array(), // the options for just the addr field
    'lat_name'       => 'lat',   // the name of the lat field
    'lng_name'       => 'lng',   // the name of the lng field
    'addr_name'      => 'addr',  // the name of the addr field (optional)
    'map_width'      => '100%',  // the width of the map
    'map_height'     => '300px', // the height of the map
    'default_lat'    => 51.5,    // the starting position on the map
    'default_lng'    => -0.1245, // the starting position on the map
    'include_jquery' => false,   // jquery needs to be included above the field (ie not at the bottom of the page)
    'include_gmaps_js'=>true     // is this the best place to include the google maps javascript?
)

Screenshots

Default form
Current position
Search locations
LatLng validation

Known problems

Because the form type template includes javascript, there's not yet a way to bunch it all together at the very bottom of the page, so it is included at the bottom of the field. This means that jquery and the javascript plugin in Resources/public/js needs to be included before the field. I'm not sure of a way around this, but I think it's going to be addressed in a later version of the form framework.

Credits

  • Ollie Harridge (ollietb) as main author.
Copyright (c) 2012 Ollie Harridge

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished
to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
oh_google_map_form_type:
api_key: ~
  • Merge pull request #40 from sujayjaju/master
    By web-flow, 3 years ago
  • Merge pull request #41 from ollieLtd/master
    By web-flow, 3 years ago
  • Merge pull request #21 from pasinter/master
    By web-flow, 3 years ago
  • Make Search Field Optional
    By sujayjaju, 3 years ago
  • Add support for API Key
    By sujayjaju, 3 years ago
  • Use fully qualified class names for form fields
    By kengolovin, 3 years ago
  • Merge pull request #20 from ollietb/master
    By web-flow, 3 years ago
  • Merge pull request #39 from webbertakken/master
    By web-flow, 3 years ago
  • Add optional use address button
    By , 3 years ago
  • Fix address not updating when dragging
    By webbertakken, 3 years ago
  • Fix oebabaluba commit 8514bc1 not being backward compatible
    By webbertakken, 3 years ago
  • Add optional address field, with reverse geocoding (backward compatible)
    By webbertakken, 3 years ago
  • Merge pull request #19 from ollietb/master
    By web-flow, 3 years ago
  • Update composer.json
    By web-flow, 3 years ago
  • Merge pull request #18 from ollietb/master
    By web-flow, 3 years ago
  • Merge pull request #33 from MrNicodemuz/sf3
    By ollietb, 4 years ago
  • Merge pull request #32 from MrNicodemuz/FullWidth
    By ollietb, 4 years ago
  • Symfony3 fixes
    By oebabaluba, 4 years ago
  • Symfony3 support
    By oebabaluba, 4 years ago
  • Fix documentation
    By oebabaluba, 4 years ago
  • Add support for full width for map
    By oebabaluba, 4 years ago
  • Merge pull request #30 from xmon/master
    By ollietb, 4 years ago
  • To remove warning javascript to use Google Maps API.
    By , 4 years ago
  • Merge pull request #15 from ollietb/master
    By ollietb, 5 years ago
  • Merge pull request #25 from JokubasR/patch-1
    By ollietb, 5 years ago
  • Update google_maps.html.twig
    By JokubasR, 5 years ago
  • Merge pull request #24 from ollieLtd/master
    By ollietb, 6 years ago
  • Merge pull request #14 from ollietb/master
    By ollietb, 6 years ago
  • Merge pull request #20 from Warxcell/patch-1
    By ollietb, 6 years ago
  • Merge pull request #23 from dnna/master
    By ollietb, 6 years ago