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.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
tests
.gitignore
CoordinatesPicker.js
CoordinatesPicker.min.js
LICENSE
README.md
README_RU.md
bower.json
karma.conf.js
package.json

README.md

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.