配列に保持してある分だけマーカーを作成(Google Maps)

Motoki Watanabe 24views 更新:2016年12月7日
// 変数 map_canvas
var map_canvas;

// 配列の生成
var data = new Array();
data.push({lat:'35.319933', lng:'139.487519', name:'片瀬小学校'});
data.push({lat:'35.322291', lng:'139.493211', name:'片瀬中学校'});
data.push({lat:'35.299129', lng:'139.482337', name:'県立かながわ女性センター'});

// マップの中心 変数 map_center
var map_center = new google.maps.LatLng(data[0].lat, data[0].lng);

// 変数 map_options
var map_options = {
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 center: map_center,
 zoom: 14,
};

//変数 map_canvas
map_canvas = new google.maps.Map(document.getElementById("map_canvas"), map_options);

// マーカーの作成(0からデータの数分まで)
for (i = 0; i < data.length; i++) {
 create_marker(data[i].lat, data[i].lng);
}

// 関数 create_marker
function create_marker(lat, lng){
 //変数 marker_options
 var marker_options = {
   map: map_canvas,
    position: new google.maps.LatLng(lat, lng),
    zIndex: 0,
  };
  // 変数 marker
  var marker = new google.maps.Marker(marker_options);
}

for文を0からdata.lengthで指定することにより、 配列にデータが増えてもその分まで含めて繰り返してくれます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません