The jQuery Location Picker
You know the story. You've built a site for an outlet with lots of stores or perhaps an estate agency with lots of properties, and now the client wants an easy way to add locations to their site. So you send them off to Google Maps, tell them which part of the URL they need and get them to paste it into a Lat/Lng field in your CMS. But then you find out that the Google Search didn't return the exact location of what they were after so you tweak the numbers until its just right.
The problem is that I am just too lazy to explain all that to a client, and all that trail and error with numbers is just too much. So please let me introduce to you my first submission to the jQuery plugins library, the jQuery Location Picker.
The code couldn't be simpler, you'll need to include the Google Maps API (which can now be used without an API key), the jQuery Library and the LocationPicker plugin. Then just call the .locationPicker() function on your jQuery object.
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.locationpicker.js'></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('input.latlng').locationPicker();
});
</script>
Download it at Google Code.
Please note that this plugin is very much in BETA.
November 8th, 2010 - 10:42
Very nice little add-in. I could have done with that when I was writing a travel blog in August last year.
November 9th, 2010 - 10:28
Hi Ste,
I have set these defaults which can be overridden, just pass as parameter to locationPicker();
jQuery(‘input.latlng’).locationPicker({
width: “300px”,
height: “200px”,
backgroundColor: ‘#fff’,
border: ’1px solid #ccc’,
borderRadius: 10,
padding: 10
});
I will be adding some more in the near future.
November 9th, 2010 - 22:11
Also meant to ask:
1. the map pops up over form elements, except when you try to drag the map, it corrupts. Is this a z index issue.
2. if this is unable to be resolved, can we parse the map to open in a modal window.
3. the lat and long that appear in the input box, in our case is outside of a form.
The form parses 3 fields directly to the input element, as such the input element ( of your script ) cannot be within the form itself.
However, we also have a disabled form field within the form, that we would like to echo the lat and long to. Is this possible.
If need be I can email you the link to our form, but its not for public viewing.
Regards Ste
November 10th, 2010 - 16:59
love it Chris, think I might have to pinch that!
November 12th, 2010 - 12:00
Hi Ste,
If you want to style the text input this can be done with a normal Style Sheet or the jQuery .css() function as you have used. If you want to email a link so I can see your other issues I will take a quick look. chris@webcoda.co.uk.
Chris
November 14th, 2010 - 04:06
Hi chris, thanks we have it fixed now. The issue I have I will email you, perhaps you can help us.