Logicify / jquery-locationpicker-plugin

JQuery Location Picker plugin
MIT License
389 stars 260 forks source link

Location Name not working on modals #143

Open magorich opened 6 years ago

magorich commented 6 years ago

Hi I have a question on Stackoverflow with this issue https://stackoverflow.com/q/51505478/1339326

I'm using the locationpicker on a modal, the first time I open the locationpicker everything is working fine but if I close the modal and then open it again the "location name" isn't working, I can't get results send to my input on the modal.

I'm using the same as in the demo and I have the inputbinding like this:

inputBinding: { latitudeInput: $('#place_latitude12'), longitudeInput: $('#place_longitude12'), locationNameInput: $('#us313-address') },

Does anyone have the same issue? Any ideas?

I think I must "reload" the location picker or re-initialize it but I have no idea of how to do that or if that's going to work

magorich commented 6 years ago

I think it may be related to this issue

https://github.com/Logicify/jquery-locationpicker-plugin/issues/11

magorich commented 6 years ago

Well I figured something out, I don't know why the plugin isn't working but here's my solution and it's working like I wanted

I created a Geocoder and a reference to the last latitude and longitude of the marker

 var geocoder = new google.maps.Geocoder;
    var lastLat = "any";
    var lastLng = "any";

I save the last latitude and longitude when the locationpicker triggers the onchanged event

    onchanged: function(currentLocation, radius, isMarkerDropped) {
                            lastLat = currentLocation.latitude;
                            lastLng = currentLocation.longitude;
                        }

Then when the modal is open I use that geocoder to obtain the address of the marker

```

var latlng = {lat: lastLat, lng: lastLng};

                    geocoder.geocode({'location': latlng}, function(results, status) 
                    {
                        console.log(status);
                        if (status === 'OK') 
                        {
                            if (results[0]) 
                            {
                                $('#us313-address').val(results[0].formatted_address);
                                //infowindow.open(map, marker);
                            } 
                            else 
                            {
                                //window.alert('No results found');
                            }
                        } 
                        else 
                        {
                            //window.alert('Geocoder failed due to: ' + status);
                        }
                    });


I hope this help someone with the same problem, if anyone has another idea it's welcome
JesseLabruyere commented 6 years ago

Adding this line of css fixed the problem in my case

<style type="text/css">
    .pac-container.pac-logo {
        z-index: 9999;
    }
</style>