Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Location Name not working on modals #143

Open
magorich opened this issue Jul 24, 2018 · 3 comments
Open

Location Name not working on modals #143

magorich opened this issue Jul 24, 2018 · 3 comments

Comments

@magorich
Copy link

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
Copy link
Author

I think it may be related to this issue

#11

@magorich
Copy link
Author

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
Copy link

Adding this line of css fixed the problem in my case

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants