CODEWITHSUNDEEP
jquerygoogle-maps
Burak Erdem
Burak Erdem

Reputation: 19969

Placing Marker and Getting Lon/Lat Values at Google Maps

I'm trying to write a simple web application where people will have the chance to place a marker on Google Maps (anywhere they want) and write a short text message (not on the map, but a simple textarea on a form). I will then save lan/lon values and the text message into a database but I don't know how to place a marker and get its lan/lon values. I would like to use jQuery with placing a marker and then getting its coordinates.

I saw a few examples of this but I couldn't manage to write the JavaScript part. Is there a jQuery plugin that does this or is it possible to write this with jQuery?

Thanks.

EDIT: I used search before writing this question but couldn't find the answer on StackOverflow. After sending the question I was doing a search on Google and I came up with this How do you click on a map and have latitude and longitude fields in a form populated?. I think this is the exact answer to what I was looking for.

Upvotes: 0

Views: 4027

Answers (2)

JOBG
JOBG

Reputation: 4624

Well I dont know if there is any jquery plugin to do that for you, but google maps API is well documented: http://code.google.com/intl/en/apis/maps/documentation/javascript/basics.html

If you want to add a marker to a map when a user click on it, use a listener:

google.maps.event.addListener(map, 'click', function(event) {
                marker = new google.maps.Marker({
                         position: event.latLng,
                         map: map,
                         draggable: true,
                         title: title
                         });
                marker.setMap(map);
            });

here the coords are available by a property of the event (where the user did click on the map), this comes from the event itself

 click(overlay:GOverlay, latlng:GLatLng, overlaylatlng:GLatLng)

and this latlng is an object of type GLatLng http://code.google.com/intl/en/apis/maps/documentation/javascript/v2/reference.html#GLatLng

and the GLatLng class has methods to get the lat and long actual values.

var LAT = event.latLng.lat();
var LNG = event.latLng.lng();

All this can look a little overwhelming at the beginning but its just a thing of knowing the type of object, events, methods and properties that are available for each case.

If you have some basic knowledge of JavaScript you should do well and there is really no need to do it with a plugin just as @rcravens stated it does not need much wrapping.

Upvotes: 2

rcravens
rcravens

Reputation: 8390

I wrapped the google maps v3 api (not that it needs much wrapping) into a jquery plugin. Here is a post to how to download / use:

http://blog.bobcravens.com/2010/06/a-google-maps-version-3-jquery-plugin/

Here is a demo page:

http://bobcravens.com/demos/GoogleMaps3/

Hope this helps. Let me know if you have questions.

Bob

Upvotes: 1

Related Questions