Hi, I have the json and the js, but I can't figure out how you call the event. I am new to this. I have 'viewed source' and tried to copy your entire demo page, but mine doesn't work. Can you give a one page example with html? Thanks very much,
Charlotte

First, thanks a lot for the great plugin, this was my 'EXACT' requirement and coudnt believe someone had a plugin to do just that. Being a non-programmer by profession, this was a life saver!

1. My page has a structure something like this:

<div class="geo">

<div id="maps" style="width: 100%; height: 400px;"></div>

</div>

1. On document ready I have a function that hides the parent div

   $(document).on("pagecreate","#CommSchedulingPage",function(){
     $(".geo").hide();

2. I have button, when click on it, I show the parent div

   $(".geo").show();

3. On show , the maps only occupy the upper left portion of the #maps div as shown in attached image.

I initialize location picker as below at the end body section:, should I add anything else? Need help.

$(function(){
$('#maps').locationpicker({
location: {latitude: 13.204492, longitude: 77.707691},    
radius: 500,
inputBinding: {
    latitudeInput: $('#lat'+'1'),
    longitudeInput: $('#long'+'1'),
    radiusInput: $('#radius'+'1'),
    locationNameInput: $('#address'+'1')
},
enableAutocomplete: true,
onchanged: function(currentLocation, radius, isMarkerDropped) {
//alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
$('#lat'+'1').val(currentLocation.latitude);
$('#long'+'1').val(currentLocation.longitude);
$('#radius'+'1').val(radius);


}
});
});

Actual page in action: http://www.yfs.co.in/webui/CommScheduling.html

Click yes for 'Notify users at certain locations only?'
and then click yes for 'Want to add additional locations to notify?'

Hello,

Is it possible to define the map styles? For example: http://snazzymaps.com/

Thank you,
Miguel

It would be great if you could pass options to the google map, as specified by Google Maps API V3. Maybe something like

var gmapDefaults = {
            zoom: settings.zoom,
            center: new google.maps.LatLng(settings.location.latitude, settings.location.longitude),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            disableDoubleClickZoom: false,
            scrollwheel: settings.scrollwheel,
            streetViewControl: false,
            radius: settings.radius,
            locationName: settings.locationName,
            settings: settings,
            draggable: settings.draggable
};

var gmapContext = new GMapContext(this, $.extend({}, gMapDefaults, gMapOptions);

Change by Location Name is not working on Bootstrap Modal even when autocomplete is enabled: true.

When the map marker is moved, or the location picker is zoomed, it converts the input units from miles in to metres (understandable because this is the units the Gmaps API uses). However - It appears to always want the initial inputs in terms of miles.

This can cause problems when using it in conjunction with other libraries (such as bootstrap-slider) as the two libraries set the .val() of the at different times. Here is an example screenshot where the console output shows the problem:

One solution to this problem would be just to have the slider be in metres as well. Is there a way to tell location-picker NOT to convert the input in the radius box from miles to metres, and just to keep everything in metres?

Thanks :)

To prevent this put the following code at line 140:

            // Prevent form from being submitted if user hit enter.
            inputBinding.locationNameInput.keypress(function(event){
                if (event.keyCode === 13){ return false; }
            });

This is not an issue, is more like a question

How can some one work with the map when its loaded to a hidden DIV then made apear via JQUERY?

Actually everything is written in title.
Autocomplete is not working in modal window.

Hi,
I want to show locationpicker in bootstrap modal. But I am unable to show map in modal.
Can you guide me how I can do that.

Thanks

in my case i got this address when dragging marker to other coordinate

Jalan Jakarta No.21, Batununggal, Kota Bandung, Jawa Barat 40271, Indonesia

my code

$('#location_picker').locationpicker({
    location: {latitude: -6.8959712, longitude: 107.6309693},
    locationName: "",
    radius: null,
    zoom: 15,
    scrollwheel: true,
    inputBinding: {
        latitudeInput: $('#latitude'),
        longitudeInput: $('#longitude'),
        radiusInput: null,
        locationNameInput: $('#address')
    },
    enableAutocomplete: false,
    enableReverseGeocode: true,
});

if i use this code as in example

function updateControls(addressComponents) {
    $('#address').val(addressComponents.addressLine1);
    $('#city').val(addressComponents.city);
    $('#province').val(addressComponents.stateOrProvince);
    $('#zipcode').val(addressComponents.postalCode);
    $('#country_id').val(addressComponents.country);
}

$('#location_picker').locationpicker({
    location: {latitude: -6.8959712, longitude: 107.6309693},
    radius: null,
    zoom: 15,
    enableAutocomplete: true,
    enableReverseGeocode: true,
    onchanged: function (currentLocation, radius, isMarkerDropped) {
        var addressComponents = $(this).locationpicker('map').location.addressComponents;
        updateControls(addressComponents);
    },
    oninitialized: function(component) {
        var addressComponents = $(component).locationpicker('map').location.addressComponents;
        updateControls(addressComponents);
    }
});

I got "21 Jl. Jakarta" for street component,
In my country the correct format for street address is "Jalan Jakarta No.21"

how can i get correct street address format?

thank you

How can I reinitialize the map by using new coordinates that are added automatically?

I am using the map in a modal but the coordinates are out of the modal.

I am updating the coordinates automatically, and I tried to trigger change event on them but the coordinates from map dont update like this, I have to manually add something to the field in order to update. I dont know why the change event doesn't work on the coordinates input.

Just tested it in Ireland.

The picker has problems with Umlaute (like ü) in the city name (and very likely in other fields, too). E.g. the city name München is truncated to M.

In my project I initialize and remove multiple locationpickers in the same window, and there are multiple new .pac-container and pac-container stying elements appended to the head of the doc. Can these be removed? Or a way to $(".picker").data("locationpicker").remove()

Hi, I have the json and the js, but I can't figure out how you call the event. I am new to this. I have 'viewed source' and tried to copy your entire demo page, but mine doesn't work. Can you give a one page example with html? Thanks very much,
Charlotte

Hey,

Can you suggest how I can get address, city, state, country, pin code in separate input boxes using locationpicker plugin? Thanks!!

How to add HTML5 Geolocation?

How do i add the HTML5 Geolocation in order to initialise the start location to the user location?

Start collapsed with Bootstrap BUT no map? i start the initialisation collapsed with bootstrap BUT the map wont show?

In regards to #24 you released v0.1.11, which replaces the district by the proper city name. But the district information is also relevant in many cases. So wouldn't it be better to return both? See this as a feature request :-)

When loading google maps api asynchronously, the plugin fails to load autocomplete.

This is the error I get:

TypeError: Cannot read property 'Autocomplete' of undefined
#11 http://127.0.0.1/eqfw/js/jquery.locationpicker.js:13:69
#10 http://127.0.0.1/eqfw/js/jquery.locationpicker.js:13:124 setupInputListenersInput()
#9 http://127.0.0.1/eqfw/js/jquery.locationpicker.js:24:1205 HTMLDivElement.()
#8 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:2882 Function.n.extend.each()
#7 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:847 n.fn.n.each()
#6 http://127.0.0.1/eqfw/js/jquery.locationpicker.js:24:13 $.fn.locationpicker()
#5 http://127.0.0.1/eqfw/js/eqs.funciones.js:1008:10 HTMLDocument.()
#4 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:26911 j()
#3 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:27220 Object.k.add as done
#2 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:29326 n.fn.ready()
#1 http://127.0.0.1/eqfw/js/jquery-2.1.3.min.js:2:24411 n.fn.init()

This is how I load google maps api and my custom callback function:

function initialize(obj,varlat,varlon,varzoom,varradius,varautocomplete){
if (varzoom==undefined) varzoom=15;
if (varradius==undefined) varradius=30;
if (varautocomplete==undefined) varautocomplete=true;
if (varlat==undefined || varlon==undefined) {
varzoom=5;
varlat=10.65;
varlon=-71.633333;
}
$(function(){
$(obj).locationpicker({
location:{latitude:varlat,longitude:varlon},
radius:varradius,
zoom:varzoom,
enableAutocomplete:varautocomplete,
inputBinding:{
latitudeInput:$('#lat'),
longitudeInput:$('#lon'),
locationNameInput:$('#dummyaddr')
}
});
if (varzoom==5){
if ("geolocation" in navigator){
navigator.geolocation.getCurrentPosition(function(position){
$(obj).locationpicker('location',{latitude:position.coords.latitude,longitude:position.coords.longitude});
});
}
}
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
'&signed_in=true&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;

Love the plugin, I'm having an issue attempting to programmatically set the map location.

This questions has been asked a few times without an answer:
http://stackoverflow.com/questions/31631777/logicify-location-picker-using-dynamic-change-for-input
#20

Essentially I would assume that I could programmatically set the values of latitude and/or longitude and the plugin would respond as if I had typed those values in (through the inputBinding latitude and longitude 'on('change' functions). However it doesn't.

I've tried various attempts at calling .locationpicker() after resetting the values or .trigger() on the values themselves. I'm not sure how to proceed if I can't get the inputBindings to fire.

Can anyone steer me in a direction to get the inputBinding functions to pick up on programmatically setting the lat and long?

I do not want marker to be draggable, it should be fixed to the center of div, I want only the map to be draggable.

So that user can just drag the map and set the location by its fixed marker.

Note: Now the user has to search the marker, if lost while playing around the map. A fixed marker will help a lot.

Is there any option to see the satellite view ?

Hy ^^

First of all, thank you for this amazing work ! It's simple to use and I think all pluigin must be as simple as that ^^

I have a problem with Autocomplete. When I use a clearfix (any of them) in any parent, the autocomplete doesn't work anymore. I don't know if it's already knew but you have any solutions it will be nice ^^

Thanks in advance and sorry for my english !

EDIT: Ok sorry z-index just worked fine for me ^^

I trace this code, default mapTypeControl is false. is it possible let us enable it ?

var gmapContext = new GMapContext(this, {
                zoom: settings.zoom,
                center: new google.maps.LatLng(settings.location.latitude, settings.location.longitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false,
....

The order in which the library calls updateInputValues and the user-specified onchanged handler is inconsistent. When using autocomplete it is in the following order:
updateInputValues(inputBinding, context);
context.settings.onchanged.apply(gmapContext.domContainer, ...

This allows for the onchanged function to overwrite the value automatically set in the locationName field by updateInputValues (which is useful if you don't want the default formatted address string that updateInputValues inserts).

However in the event handler for dragend, it is done the other way
updateInputValues(gmapContext.settings.inputBinding, gmapContext);
context.settings.onchanged.apply(gmapContext.domContainer, ...

which nullifies any changes the user makes to the locationName input in the onchanged handler.

Patch:

From 0198c6b2fdb9c838a33812030a4e0dfa3041eb7e Mon Sep 17 00:00:00 2001
From: wspencer <[email protected]>
Date: Thu, 23 Jun 2016 09:31:44 -0600
Subject: [PATCH 1/1] locationpicker: Standardizes the order of the onchanged
 function call in relation to updateInputValues.

---
 src/locationpicker.jquery.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locationpicker.jquery.js b/src/locationpicker.jquery.js
index 81a2c50..f1e3a95 100644
--- a/src/locationpicker.jquery.js
+++ b/src/locationpicker.jquery.js
@@ -372,8 +372,8 @@
             google.maps.event.addListener(gmapContext.marker, "dragend", function(event) {
                 GmUtility.setPosition(gmapContext, gmapContext.marker.position, function(context){
                     var currentLocation = GmUtility.locationFromLatLng(gmapContext.location);
-                    context.settings.onchanged.apply(gmapContext.domContainer, [currentLocation, context.radius, true]);
                     updateInputValues(gmapContext.settings.inputBinding, gmapContext);
+                    context.settings.onchanged.apply(gmapContext.domContainer, [currentLocation, context.radius, true]);
                 });
             });
             GmUtility.setPosition(gmapContext, new google.maps.LatLng(settings.location.latitude, settings.location.longitude), function(context){
--
1.9.1

hi all this is a superb plugin for easily grabbing lat and lon especially with the modal view.

I need to also grab the map zoom level. Any way I can do this?

Thanks in advance

Is it possible to initialize the locationNameInput empty?

Otherwise would it be a good idea to clear the input value with oninitialize?

The option to geolocate the user seems to be missing right now. There can be google's crosshair icon on the top of the map for geolocation, and also an option while initialization, if user should be geolocated by default.
Is the absence of this feature by design? If not, I can submit a PR shortly, as I've implemented it locally for my requirements.
Thanks

I want to select multiple locations in map and get latitude and longitude for each of the select location. How can I use this plug-in for the same?

The change event gets called on initialization. I think this should be a bug. To recreate the issue visit the example page http://logicify.github.io/jquery-locationpicker-plugin/ here. You get a few alerts saying the location has changed even though you didn't interact with the page yet.

When looking at the demo page, scripts do not get loaded because they are being loaded over HTTP, while the page itself is HTTPS.

Mixed Content: The page at 'https://logicify.github.io/jquery-locationpicker-plugin/' was loaded over HTTPS, but requested an insecure script 'http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.

This is an issue for people using HTTPS Everywhere which always goes for the https version of a page.

I am not sure how to enable earth view with options.

The issue "How can I get proper city name? #24" happens again.

If you pick this location: "144-15 68th Rd, Flushing, NY 11367, EE. UU.". The addressComponents does not have the "city" property. It happens in other places of NY also.

Thanks

Map only show grey with some with the partially visible marker at the top left corner what could be the issue, there are no script errors

Looks like bower is now out of date. Can you tag the current repo with a new version?

I maybe getting confused as the dist has been committed and is not up to date.

Is there a way to get my current location?
If yes, kindly explain it. Put it in your documentation as well.

Thank you,
Supun Silva

TypeError: gmapContext.onlocationnotfound is not a function

gmapContext.onlocationnotfound();

Produce when you try some text search on autosuggestion, no record found and then you press enter.

I added locaionpicker to a plugin in wordpress but i get this error

inputBinding.radiusInput.value is not a function

http://i.imgur.com/FliKEV3.png

Hello,

As the title states, I have implemented functionality similar to the 'Subscribing for Events' example seen on this page (http://logicify.github.io/jquery-locationpicker-plugin/#usage).

When I select a city as a location, for example 'Sydney, New South Wales, Australia' it autocompletes to '343 George St, Sydney NSW 2000, Australia'.

However the example that Google supplies allows you to select a city as a location rather than a specific address. (https://developers.google.com/maps/documentation/javascript/examples/places-searchbox).

Is there something I'm missing to fix this issue?

    $(document).ready(function() {
        $('#map').locationpicker({
            location: {latitude: -27.4732212, longitude: 153.02787250000006},   
            radius: 1,
            inputBinding: {
                latitudeInput: $('#us2-lat'),
                longitudeInput: $('#us2-lon'),

                locationNameInput: $('#us2-address')
            },
                enableAutocomplete: true,
                onchanged: function (currentLocation, radius, isMarkerDropped) {
                    // Uncomment line below to show alert on each Location Changed event
                    //alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
                }
        });
    });

Any help would be greatly appreciated.

How do you hide the marker?

Is there some sort of registration that needs to happen with Google? Great plugin btw. Thanks a bunch.

Whenever I change the lat, long coordinates manually the marker shifts to a new position and rightly so , but the value of the location field remains unchanged as the coordinates are changed which is obviously wrong.

What is the solution?

Is the plugin ready for this update?

https://developers.google.com/maps/documentation/javascript/

Location autocomplete does not seem to work in modal dialogs.
The pulldown autocomplete menu is not showing.

It doesn't work in the example and the online demo.

Maybe there is an issue with bootstrap.

In your example Advanced usage of geo decoder features, when I place the marker on a random big city, the city name is either empty or shows the name of the district.

E.g. if I place the marker somewhere in Paris, the address would be

43-51 Boulevard Saint-Jacques, 75014 Paris, Frankreich

But instead, city remains empty

• Street: 43-51 Boulevard Saint-Jacques
• Postal code: 75014
• City: [empty]
• State: IDF
• Country: FR

Unfortunately, the addressComponents

 var addressComponents = $(this).locationpicker('map').location.addressComponents;

doesn't contain the correct city name (Paris). Examples in Berlin outputted the district name instead of the city.

How can I access the proper city name?

I am loading the google api with the key:

<script type="text/javascript" src='https://maps.googleapis.com/maps/api/js?key=MYKEY0&libraries=places'></script>

But the autocomplete isnt working anymore, any suggestion (and yes, the enableAutocomplete: true is enabled)