地図上で場所を選択すると選択した地点の座標をフォームのhiddenフィールドに入力するプラグイン

jQuery プラグインの作成方法を学びつつ、色々作ってみる。

今回は、HTMLのフォームで場所の情報を登録する際に座標情報を入力してもらうのに使えそうなプラグインを作った。
表題のままだけど、地図で地点を選択するとその座標情報が指定したフォームフィールドに入力される。

Google Maps API の V3 で作ってみた。
http://code.google.com/intl/en/apis/maps/documentation/v3/

初期表示場所をクッキーに保存するのに、jquery.cookie.js プラグインを使用してる。
http://plugins.jquery.com/project/cookie

map_selector.js

(function($) {
$.fn.mapPointSelector = function (options) {
var elements = this;
return elements.each(function () {
new MapPointSelector(this, options);
});
};
var MapPointSelector = function (map_node, options) {
this.init(map_node, options);
};
$.extend(MapPointSelector.prototype, {
init: function (map_node, options) {
var self = this;
self.options = $.extend({
"lat_field": "#id_lat",
"lng_field": "#id_lng"
}, options || {});
self.map_node = $(map_node);
self.map = null;
self.center_marker = null;
self.lat_field = $(self.options.lat_field);
self.lng_field = $(self.options.lng_field);
self.setup_map();
},
update_point_fields: function (center) {
var self = this;
self.lat_field.val(center.lat());
self.lng_field.val(center.lng());
},
setup_map: function () {
var self = this;
var map_status = self.read_map_cookie();
var zoom = 4;
var center = null;
if (self.lat_field.val().length > 0) {
center = new google.maps.LatLng(self.lat_field.val(), self.lng_field.val());
} else if (map_status) {
zoom = map_status.zoom;
center = new google.maps.LatLng(map_status.lat, map_status.lng);
} else {
center = new google.maps.LatLng(37.321429, -122.015791);
}
self.map = new google.maps.Map(document.getElementById(self.map_node.attr("id")), {
zoom: zoom,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
self.center_marker = self.create_marker("ここの座標を登録します", center);
self.setup_map_events();
},
setup_map_events: function () {
var self = this;
google.maps.event.addListener(self.map, 'drag', function () {
var center = self.map.getCenter();
self.center_marker.setPosition(center);
self.update_point_fields(center);
});
google.maps.event.addListener(self.map, 'idle', function () {
var center = self.map.getCenter();
var zoom = self.map.getZoom();
self.save_map_cookie(center, zoom);
});
},
save_map_cookie: function (center_latlng, zoom) {
var val = center_latlng.lat() + "," + center_latlng.lng() + "," + zoom;
$.cookie("map-status", val, {"path": '/', "expires": 30});
},
read_map_cookie: function () {
var status = $.cookie("map-status");
if (status) {
var state_list = status.split(",");
if (state_list.length == 3) {
return {"lat": state_list[0] - 0, "lng": state_list[1] - 0, "zoom": state_list[2] - 0};
}
}
return null;
},
create_marker: function (title, latlng) {
var self = this;
var marker = new google.maps.Marker({
position: latlng,
map: self.map,
title: title
});
return marker;
}
});
})(jQuery);

test.js

$(document).ready(function() {
var map_selector = $("#map").mapPointSelector();
});

test.css

#map {
width: 100%;
height: 350px;
}

test.html

...
<head>
...
<link rel="stylesheet" href="/css/test.css" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/map_selector.js"></script>
<script type="text/javascript" src="/js/test.js"></script>
...
</head>
...
<form ...>
...
<input type="hidden" name="lat" id="id_lat" />
<input type="hidden" name="lng" id="id_lng" />
...
</form>
<div id="map-block">
<div id="map"></div>
</div>
...