CODEWITHSUNDEEP
javascriptgoogle-mapsjquery-plugins
Eduardo Molteni
Eduardo Molteni

Reputation: 39443

jQuery or Javascript helper to get a LatLng from Google Maps

I need to let the user input a geocode (LatLng ) of an arbitrary point of the map, for store in the DB and later use.

Before embracing the duty, Do you know a jQuery plug-in or javascript that:

(or something along the lines)

Upvotes: 1

Views: 1659

Answers (1)

Argiropoulos Stavros
Argiropoulos Stavros

Reputation: 9533

I strongly recommend to use the v3 api since it is equally easy to use and fast to learn as a plugin.Also a plugin won't offer you the popup.

So here is my solution:

1. Import

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

2. Place a div in your html
<div class="mapClass" id="mapDiv" ></div>

3. Initialize your map

var map;

var greece = new google.maps.LatLng(38.822590,24.653320);

//Map options
var mapOptions = {
    zoom: 6,
    center: greece,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Make a new map
map = new google.maps.Map(document.getElementById("mapDiv"),mapOptions);

Voila,you get your map and the navigation controls

4.Bind onclick event google.maps.event.addListener(map, "click",yourFunction);

And implement your function to get the coords from the click and fill some textfields or something plus add a marker

function getCoordinates(event){
  if (event.latLng) {
       var marker;
       //Fill your textfields
       document.getElementById('yourLngTextfield').value=event.latLng.lng();
       document.getElementById('yourLatTextfield').value=event.latLng.lat();

       //Remove any previously added marker and add a marker to that spot
       if(marker!=null){
            marker.setMap(null);
       }

       var latlng = event.latLng;
       marker = new google.maps.Marker({
             position: latlng
             map: map
        });
  }
}

That's it.It is not tested though.

Now if you want to add all this in popup use colorbox

If you still want to use plugins check here

Cheers

Upvotes: 6

Related Questions