Posted By


terrencewood on 07/31/10

Tagged


Statistics


Viewed 102 times
Favorited by 3 user(s)

jquery.googlemap


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /**
  2.  * Initialize a googlemap with a single marker
  3.  * Dragging the marker updates a text input
  4.  *
  5.  * usage:
  6.  * $('#map').('#myinput', -41.3, 174.783);
  7.  *
  8.  * requirements:
  9.  * googlemaps script to be loaded with your googlemaps api key
  10.  * <code>
  11.  * <script src="http://maps.google.com/maps/api/js?sensor=false&key=YOURKEY"></script>
  12.  * </code>
  13.  *
  14.  * @param input string selector for the input to update
  15.  * @param lat float latititude for the marker
  16.  * @param lng float longitude for the marker
  17.  *
  18.  */
  19. (function ($) {
  20. $.fn.googlemap = function (input, lat, lng) {
  21. var el = this.eq(0);
  22. return el.each(function () {
  23. var latlng = new google.maps.LatLng(lat, lng);
  24. var options = {
  25. zoom: 14,
  26. mapTypeControl: false,
  27. scrollwheel: false,
  28. center: latlng,
  29. mapTypeId: google.maps.MapTypeId.ROADMAP
  30. };
  31. var map = new google.maps.Map(this, options);
  32. var marker = new google.maps.Marker({
  33. position: latlng,
  34. map: map,
  35. draggable: true
  36. });
  37. geocoder = new google.maps.Geocoder();
  38. google.maps.event.addListener(marker, "dragend", function () {
  39. geocoder.geocode({
  40. latLng: marker.getPosition()
  41. }, function (results, status) {
  42. if (status == google.maps.GeocoderStatus.OK) {
  43. if (results[0]) {
  44. $(input).val(results[0].formatted_address)
  45. }
  46. }
  47. })
  48. })
  49. })
  50. }
  51. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.