■動作概要
・googlemapの任意の場所をクリックしたら、過去にクリックしていた場所のマーカーは削除し、新しくマーカーを設置する。
変数:locationは緯度経度が入っている。
→正確にはevent.latLngプロパティに入っている。
var mapCanvas; var cmap; var markersArray = []; // 初期処理 $(function(){ initMap(); }); function initMap(){ if($("#mapcheck").size() > 0){ var latlng = new google.maps.LatLng(eval(35.658599), eval(139.745443)); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDoubleClickZoom: true // ダブルクリックでズーム+1と中央寄せを機能しないように。 }; cmap = new google.maps.Map(document.getElementById("mapcheck"), myOptions); // クリックでマーカーを設置する google.maps.event.addListener(cmap, "click", function(event) { placeMarker(event.latLng); }); // 地図を移動させて、常に中心点にマーカーを設置する google.maps.event.addListener(cmap, "idle", function(){ placeMarker(cmap.getCenter()); }); } } // マーカーを設置する function placeMarker(location) { clearOverlays(); var marker = new google.maps.Marker({ position: location, map: cmap }); // 設置したマーカーを配列に追加する markersArray.push(marker); } // 設置したマーカーをすべて削除する。 function clearOverlays() { for (var i = 0; i < markersArray.length; i++ ) { markersArray[i].setMap(null); } }
.mytop_map { display:block; width:100%; height:400px; background:#f0f0f0; }
<div class="mytop_map checkBox" id="mapcheck"></div>