JQuery Location Picker

This plug-in allows to easily find and select a location on the Google map. Along with a single point selection, it allows to choose an area by providing its center and the radius. All the data can be saved to any HTML input element automatically as well as be processed by Javascript (callback support).

The other feature of the plug-in is automatic address resolver which allows to get address line from the selected latitude and longitude. The plug-in also supports searching by address typed into the bound input element which uses auto-complete feature from Google API to make the search process easier. In this case the marker will be automatically positioned on the map after successful address resolution.

The plug-in currently uses JQuery and Google Maps.

 

Get from GitHub

Features

Usage

The first step is including all requirements: 
<head>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
    <script src="js/locationpicker.jquery.js"></script>
</head>
Basic usage without any settings: 
<div id="somecomponent" style="width: 500px; height: 400px;"></div>
<script>
    $('#somecomponent').locationpicker();
</script>

Result

Default options:

{
    location: {
        latitude: 40.7324319,
        longitude: -73.82480777777776
    },
    locationName: "",
    radius: 500,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [],
    mapOptions: {},
    scrollwheel: true,
    inputBinding: {
        latitudeInput: null,
        longitudeInput: null,
        radiusInput: null,
        locationNameInput: null
    },
    enableAutocomplete: false,
    enableAutocompleteBlur: false,
    autocompleteOptions: null,
    addressFormat: 'postal_code',
    enableReverseGeocode: true,
    draggable: true,
    onchanged: function(currentLocation, radius, isMarkerDropped) {},
    onlocationnotfound: function(locationName) {},
    oninitialized: function (component) {},
    // must be undefined to use the default gMaps marker
    markerIcon: undefined,
    markerDraggable: true,
    markerVisible : true
}

Callback methods:

Plugin Options

name type params description
location getter null to get current position of marker
setter radius, latitude, longitude to set position of marker
subscribe setter event, callback add listener to map on event with callback
map getter null return current map context
setter null is not available
autosize call method null call inner method of plugin to call map event 'resize'

Examples

Providing options

Binding UI with the widget

Subscribing for events

Change mapTypeId

Using custom map styles

Marker is fixed in center of map

Providing autocompleteOptions

Manipulating map widget from callback

Advanced usage of geo decoder features

Select a city as a location rather than a specific address

Using widget in modal

ngular wrapper

Since version 0.1.15 available simple ability to add our plugin in angular applicaions.

Usage

Include all requirements

<head>
    //angular
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    //jQuery
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

    //Google maps API
    <script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>

    //Locationpicker
    <script src="../js/locationpicker.jquery.min.js"></script>
    <script src="../js/angularLocationpicker.jquery.js"></script>
</head>

Basic usage

<body ng-app="angularExample" ng-controller="angularExampleController">
    <locationpicker options="locationpickerOptions"></locationpicker>
<script>
    angular.module('angularExample', ['angular-jquery-locationpicker'])
        .controller('angularExampleController', [
            '$scope',
            function ($scope) {
                $scope.locationpickerOptions = {
                    location: {
                        latitude: 46.15242437752303,
                        longitude: 2.7470703125
                    },
                    inputBinding: {
                        latitudeInput: $('#us3-lat'),
                        longitudeInput: $('#us3-lon'),
                        radiusInput: $('#us3-radius'),
                        locationNameInput: $('#us3-address')
                    },
                    radius: 300,
                    enableAutocomplete: true
                };
            }
        ]);
</script>
</body>

Credits

Dmitry Berezovsky, Logicify (http://logicify.com/)

Gennadiy Varava, Logicify (http://logicify.com/)