■動作概要
・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>

この記事を書いた人

kubou

kubou

2049, inc.
web業界で生活しています。
お仕事の割合はディレクション:8、開発:2くらい。