coordinates-picker

This module allows you to show location of the address on map (Google Maps), and store it’s coordinates it in distinct field with custom format.

Parameters

Parameter	Type	Description
fields*	jQuery	Form fields from which address is build. Final address is made by concatenation of fields, divided by comma.
container*	jQuery	`Div` element where the map will be placed.
coordinates*	jQuery	Form field in which coordinates will be placed. If in the moment of initialisation this field is not empty, coordinates will be marked on the map with marker.
format	string	Data format in which coordinates will be stored in the text field. By default it is `lng lat`, where lat is latitude and lng is longitude. Such data format allows us to prepare field for storing in the database like POINT object: `PointFromText('POINT(".$coordinates.")')`.
center	google.maps.LatLng\|Array	Coordinates of the map center. Used if on the initialisation moment all address fields and coordinates fields are empty.
selectValue	boolean	By default module takes select values not by `val()` method, because in common cases tag `option` in `value` attribute contains some identifiers, but not values. For example `option value=“1”>Russia`. Setting this parameter to false cancels this behaviour.
zooms	object	Levels of scale. `initial` (initial), `country` (country precision), `locality` (city precision), `route` (street precision), `street_address` (appartment precision).
marker	object	Object of marker parameters (Google Maps API).
map	object	Object of map parameters (Google Maps API).

Methods

Method	Return value	Description
getMap()	google.maps.Map	Returns map object.
getMarker()	google.maps.Marker\|null	Returns marker object (if marker doesn’t exist return `null`).
getPosition()	google.maps.LatLng\|null	Return lat and lng object or `null`.
getPoint(format)	string	Return coordinates of found address in specified data type. If optional parameter `format` is not defined, coordinates will be formed according to initialisation options. Can be an empty string if marker doesn’t exist.

Events

Event	Descroption
viewchange	Event fires on map view change(scale or centering). Manual map moving is not considered.
coordschange	Event fires after defining/changing coordinates of current place. Event has options `marker` and `position`.
geocodingstart	Event fires on geocoding start, which also fires after address fields values change. Event has option `address`.
geocodingend	Event fires when geocoding process is finished. Event has options `address` and contains properties `status` and `results`.

Event properties

Property	Type	Event	Description
map	google.maps.Map	all events	Instance of `google.maps.Map`
mapCenter	google.maps.LatLng	all events	Instance of `google.maps.LatLng`
mapZoom	integer	all events	Current level of scale
marker	google.maps.Marker\|null	coordschange	Instance of `google.maps.Marker` or `null`
position	google.maps.LatLng\|null	coordschange	Instance of `google.maps.LatLng` or `null`
address	string	geocodingstart, geocodingend	Address for started or finished geocoding process.
status	string	geocodingend	Status of geocoding process. Matches property `status` of `google.maps.Geocoder` object.
results	object	geocodingend	Result of geocoding process. Matches property `results` of `google.maps.Geocoder` object.

Loading examples

You can get module code via three ways:

copy code from repository to your project
get code from CDN:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/coordinates-picker/1.0.0/coordinates-picker.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/coordinates-picker/1.0.0/coordinates-picker.min.js"></script>
<!-- project page on cdnjs.com: https://cdnjs.com/libraries/coordinates-picker -->

install module via Bower:

bower install coordinates-picker

Project structure:

├── assets
│   ├── images
│   │   └── marker.png
│   └── scripts
│       ├── amd
│       │   ├── main.js
│       │   ├── require.config.js
│       │   └── requirejs.async.js
│       ├── CoordinatesPicker.js
│       └── main.js
└── index.php

Module has dependency of jQuery and Google Maps, and implement AMD loading. Thats why module can be loaded via two ways:

Regular way

Part of index.html file

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&amp;language=ru"></script>
<script type="text/javascript" src="/assets/scripts/CoordinatesPicker.js"></script>
<script type="text/javascript" src="/assets/scripts/main.js"></script>

AMD (using RequireJS)

Part of index.html file

<script data-main="/assets/scripts/amd/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
<script src="/assets/scripts/amd/require.config.js"></script>

File /assets/scripts/amd/require.config.js

require.config({
    paths: {
        async: 'requirejs.async',
        coordinatespicker: '../CoordinatesPicker',
        jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min',
        googlemaps: 'https://maps.google.com/maps/api/js?sensor=false&amp;language=ru'
    }
});

define('googlemaps', ['async!googlemaps'], function() {
    return window.google;
});

Part of /assets/scripts/amd/main.js file

require(['jquery', 'googlemaps', 'coordinatespicker'], function($, google, coordinatesPicker) {
    // look "Usage example"
});

Usage example

Part of index.html file

<form id="institution-form">
    <select id="country" name="country" class="address-part">
        <option value="">Country</option>
        <option value="1">Russia</option>
        <option value="2">USA</option>
        <option value="3">Poland</option>
        <option value="4">Kazakhstan</option>
        <option value="5">Mongolia</option>
    </select>
    <input type="text" id="city" name="city" class="address-part" placeholder="City"/>
    <input type="text" id="street" name="street" class="address-part" placeholder="Street"/>
    <input type="text" id="house" name="house" class="address-part" placeholder="Apartment"/>
    <input type="text" id="coordinates" name="coordinates" readonly/>
</form>

<div>
    <div style="width: 500px; height: 500px;"></div>
</div>

Using module in /assets/scripts/main.js or /assets/scripts/amd/main.js file

// If you are using AMD, you must replace BarinBritva.CoordinatesPicker with name 
// given in dependency. In this example it is coordinatesPicker.
var coordinatesPicker = new BarinBritva.CoordinatesPicker({
    fields: $('.address-part'),
    container: $('#map'),
    coordinates: $('#coordinates'),
    format: 'lng,lat',
    center: new google.maps.LatLng(53.517, 49.417),
    zooms: {
        initial: 9,
        country: 11,
        locality: 14,
        route: 16,
        street_address: 18
    },
    marker: {
        draggable: true,
        animation: null,
        icon: '/assets/images/marker.png'
    },
    map: {
        disableDefaultUI: false
    }
});

Demo

You can see demo example <a href="http://coordinatespicker.demo.barinbritva.ru" target=“_blank">in here.

barinbritva/coordinates-picker

coordinates-picker

Parameters

Methods

Events

Event properties

Loading examples

Regular way

AMD (using RequireJS)

Usage example

Demo