/** * Google Mapのラッパークラス * @author Takahashi Fumiki */ var MoogleMap = new Class({ Implements: [Events, Options], //EventとOptionsを継承 map: null, container: null, options:{ lat: 35.67117697446449, lng: 139.72018880271912, zoom: 12, number: 10, //クリック回数を割る数字 }, counter: 0, /** * コンストラクタ * @param object container * @param object options * @return void */ initialize: function(container, number, options){ //Google Mapの読み込みに失敗したら何もしない if(!google){ return false; } //コンテナを登録 this.container = $(container); //オプションを登録 this.setOptions(options); var latlng = new google.maps.LatLng(this.options.lat, this.options.lng); //Mapオブジェクトを初期化 this.map = new google.maps.Map(this.container,{ zoom: this.options.zoom, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }); //MapオブジェクトへのリスナーはGoogle APIを利用するしかない google.maps.event.addListener(this.map, "click",(function(e){ //クリックされた地点にマーカーを置く this.putMarker(e.latLng); //クリック回数をインクリメント this.counter++; //クリック回数を割って余りがなかったら if(this.counter % this.options.number == 0){ //カスタムイベントdivisibleを発生 this.fireEvent('divisible', [new Event(), this.counter]); } }).bind(this)); }, putMarker: function(latLng){ //マーカーオブジェクトを作成 var marker = new google.maps.Marker({ draggable: true, position: latLng, map: this.map }); //Map APIでマーカーのドラッグ終了時にイベントを添付 google.maps.event.addListener(marker, 'dragend', this.markerListener.bind(this)); //マーカーを配置 marker.setMap(this.map); }, markerListener: function(mouseEvent){ //ドラッグ終了イベントを発生 this.fireEvent('dragend', [ new Event(), mouseEvent.latLng.lat(), mouseEvent.latLng.lng() ]); } }); //MoogleMapを利用する window.addEvent('domready', function(event){ //初期化 var map = new MoogleMap("map"); //divisibleイベントが発生したら、メッセージを表示 map.addEvent("divisible", function(e, counter){ $('message').set('text', counter + '回クリックされました'); }); //dragendイベントが発生したら、メッセージを表示 map.addEvent("dragend", function(e, lat, lng){ $('message').set('text', '緯度:' + lat + ' x 経度:' + lng); }); });
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id="message"></div> <div id="map"></div>
#map{ height:300px; border:1px solid #ccc; } #message{ margin:0 0 10px; padding:5px; height:15px; line-height:15px; border:1px solid #ccc; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; color:#444; font-size:11px; font-family:sans-serif; text-align:center; }