trn579s
Posts: 0
Joined: Wed Sep 12, 2012 3:30 pm

Google Maps - get lat/lng on click event

How do a retrieve the latitude and longitude that a user clicked on my google map? I want to add a marker at that location which is easy, but I cannot get the lat/lng where the user clicked.

I've read through the Google API documentation and can do this on my website fairly easily... just cannot seem to get the lat/long on a click event of the map in Tiggzi.

Here is the website example (not click but mouseover, should be similar functionality):

http://gmaps-samples-v3.googlecode.co...

Thanks in advance, loving Tiggzi!

Tom

Jose Ruacho
Posts: 0
Joined: Wed Sep 12, 2012 4:42 pm

Google Maps - get lat/lng on click event

I will follow this closely , I have the same question

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

Google Maps - get lat/lng on click event

It should be very similar to what you did in your example. You need to add an event to the map, and calculate the lat/lng values. You would be using the Google Maps API to do that.

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

Google Maps - get lat/lng on click event

It should be very similar to what you did in your example. You need to add an event to the map, and calculate the lat/lng values. You would be using the Google Maps API to do that.

trn579s
Posts: 0
Joined: Wed Sep 12, 2012 3:30 pm

Google Maps - get lat/lng on click event

That is what I am doing, although maybe I am not referencing the instance of my google map correctly? Here is my click event on the map:

var map = Tiggr('GoogleMap');
var theLat = map.getCenter().lat();
var theLng = map.getCenter().lng();
console.log("Lat is " + theLat + " and the lng is " + theLng);

This nets me an error stating "Uncaught TypeError: Object [object Object] has no method 'getCenter'":

Image

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

Google Maps - get lat/lng on click event

Get the map directly from the DOM, don't use Tiggr function.

Something like this:
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

from: https://developers.google.com/maps/do...

trn579s
Posts: 0
Joined: Wed Sep 12, 2012 3:30 pm

Google Maps - get lat/lng on click event

That just creates a new instance of the object, I already have one handy :-) In case anyone else runs across this, you need to add an event listener that watches for a click on the map. I set this up by going to 'Run Customer Javascript" on my pages Load event. Of course earlier in that script I had created a new instance of the google map like Max pointed out above.

Add the following:

//This adds a new marker where the user has clicked.
google.maps.event.addListener(map, 'click', function(event) {
marker = new google.maps.Marker({position: event.latLng, map: map});
alert("The user picked latlng " + event.latLng + ".");
});

Haim
Posts: 0
Joined: Wed Sep 05, 2012 9:15 am

Google Maps - get lat/lng on click event

I want to be able to store the current location on a map to the local storage. I use the following code:

var location = Tiggr ('location');
if (location.val() == '') {
alert ('Please enter a location.');
return;
}
var map = Tiggr('googlemap1');
map.options['address'] = location.val();

map.refresh();

localStorage.setItem('myLatitude',JSON.stringify(map.getCenter().lat()));
localStorage.setItem('myLongitude',JSON.stringify(map.getCenter().lng()));

However, the two localStorage variables are not being updated correctly. How should the last two lines look like to store these values properly?

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

Google Maps - get lat/lng on click event

When you say not being updated correctly, what exactly happens? Did you test the values that you get from JSON.stringify(map.getCenter().lat())?

Haim
Posts: 0
Joined: Wed Sep 05, 2012 9:15 am

Google Maps - get lat/lng on click event

Nothing happens - nothing is updated. I did have it updated correctly on the getlocation service call (using the response mapping and setting it in the localstorage variables. But when I try to set it using the above JS, it is not changed - is the format of the setItem calls correct? I'm specifically asking about the map.getCenter().lat() and map.getCenter().lng() calls.

Return to “Issues”