googlemapのマーカの色を個別に変更したい。
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
初めまして。未熟者の初心者です。
災害ＭＡＰを作っているのですが、
https://touemon.mixh.jp/saigai.html
災害のある・なしでマーカーの色を変更したいと思っています。
マーカーの吹き出しに
「災害あり・災害なし」
のラジオボタンを追加して更新すると入力通りにマップのマーカーが更新されるように表示したいと思っています。
お助け下さい。
災害ＭＡＰを作っているのですが、
https://touemon.mixh.jp/saigai.html
災害のある・なしでマーカーの色を変更したいと思っています。
マーカーの吹き出しに
「災害あり・災害なし」
のラジオボタンを追加して更新すると入力通りにマップのマーカーが更新されるように表示したいと思っています。
お助け下さい。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZMQWy7Sxoe2Uz67wSHBHNkIMqNggY6Lo&callback=initMap"></script>
</head>
<body>
<div id="map_canvas" style="height: 100vh;">
</div>
<script>
var map = null;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
var i = 0;
function inicializar() {
// 初期設定
var option = {
// ズームレベル
zoom: 9,
// 中心座標
center: new google.maps.LatLng(32.740485, 131.027392),
// タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), option);
google.maps.event.addListener(map, "click", function() {infowindow.close();});
// ポイントの追加
var point = new google.maps.LatLng(33.036883, 130.849557);
var marker = create_maker(point, "竜門ダム", "<a href='http://www.qsr.mlit.go.jp/ryumon/' target='_blank'>竜門ダム</a>");
var point = new google.maps.LatLng(32.320247, 131.012865);
var marker = create_maker(point, "市房ダム", "<a href='http://damnet.or.jp/cgi-bin/binranA/All.cgi?db4=2661' target='_blank'>市房ダム</a>");
var point = new google.maps.LatLng(32.995505, 131.200759);
var marker = create_maker(point, "大蘇ダム", "<a href='http://damnet.or.jp/cgi-bin/binranA/All.cgi?db4=2681' target='_blank'>大蘇ダム</a>");
}
function create_maker(latlng, label, html) {
// 純正マーカーを生成
var marker = new google.maps.Marker({position: latlng, map: map,title: label});
// マーカーをクリックした時の処理
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
gmarkers[i] = marker;
i++;
return marker;
}
function map_click(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
google.maps.event.addDomListener(window, "load", inicializar);
</script>
</body>
</html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZMQWy7Sxoe2Uz67wSHBHNkIMqNggY6Lo&callback=initMap"></script>
</head>
<body>
<div id="map_canvas" style="height: 100vh;">
</div>
<script>
var map = null;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
var i = 0;
function inicializar() {
// 初期設定
var option = {
// ズームレベル
zoom: 9,
// 中心座標
center: new google.maps.LatLng(32.740485, 131.027392),
// タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), option);
google.maps.event.addListener(map, "click", function() {infowindow.close();});
// ポイントの追加
var point = new google.maps.LatLng(33.036883, 130.849557);
var marker = create_maker(point, "竜門ダム", "<a href='http://www.qsr.mlit.go.jp/ryumon/' target='_blank'>竜門ダム</a>");
var point = new google.maps.LatLng(32.320247, 131.012865);
var marker = create_maker(point, "市房ダム", "<a href='http://damnet.or.jp/cgi-bin/binranA/All.cgi?db4=2661' target='_blank'>市房ダム</a>");
var point = new google.maps.LatLng(32.995505, 131.200759);
var marker = create_maker(point, "大蘇ダム", "<a href='http://damnet.or.jp/cgi-bin/binranA/All.cgi?db4=2681' target='_blank'>大蘇ダム</a>");
}
function create_maker(latlng, label, html) {
// 純正マーカーを生成
var marker = new google.maps.Marker({position: latlng, map: map,title: label});
// マーカーをクリックした時の処理
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
gmarkers[i] = marker;
i++;
return marker;
}
function map_click(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
google.maps.event.addDomListener(window, "load", inicializar);
</script>
</body>
</html>
藤右衛門 さん
06月25日 14時39分
藤右衛門さん、はじめまして。
お言葉そのままでよろしければ、マーカーのふきだしにラジオボタンを追加……というのは、ふきだし作成時のHTMLに足せば実現できます。
災害のあり・なし選択でマーカーの色変更というのは、ラジオボタンクリック時に、変更処理を行えば良いです。
取り急ぎ、災害あり・なしでマーカーの色を変えるまでやってみました。
（最も簡単でしたので、画像読み込みで変えました。様々なマーカーに変更できるので、マニュアルをチェックして見てください）
以下コードです。
ただ、このコードにはまだ問題があります。
■ラジオボタンのチェックが保持されない
ページを再読込したり、他のマーカーをクリックするとチェックが消えます。
今のままのロジックで実現するのであれば、ラジオボタンをチェックした際に、選択した値を保持。ラジオボタン生成時には、保持した値をもとにcheckedを分岐させる方法が考えられます。
値を保持するのは、変数を用意する、または値をサーバに送信して、データベースで保持する方法が考えられます。
Webアプリケーションとしては、ページごとに値が消えてしまっては困るので、一般的には後者になるでしょうか。
いずれにしても、値を保持する方法によってコードも変わること。加えて、学びの機会を無くしてしまうのでこの状態であげました。
あとは試行錯誤しながら、目標の機能までがんばってみてください。
ご質問などありましたらお気軽に追記ください。
お言葉そのままでよろしければ、マーカーのふきだしにラジオボタンを追加……というのは、ふきだし作成時のHTMLに足せば実現できます。
災害のあり・なし選択でマーカーの色変更というのは、ラジオボタンクリック時に、変更処理を行えば良いです。
取り急ぎ、災害あり・なしでマーカーの色を変えるまでやってみました。
（最も簡単でしたので、画像読み込みで変えました。様々なマーカーに変更できるので、マニュアルをチェックして見てください）
以下コードです。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZMQWy7Sxoe2Uz67wSHBHNkIMqNggY6Lo&callback=initMap"></script>
</head>
<body>
<div id="map_canvas" style="height: 100vh;">
</div>
<script>
var map = null;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
var i = 0;
function inicializar() {
// 初期設定
var option = {
// ズームレベル
zoom: 9,
// 中心座標
center: new google.maps.LatLng(32.740485, 131.027392),
// タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), option);
google.maps.event.addListener(map, "click", function() {infowindow.close();});
// ポイントの追加
var point = new google.maps.LatLng(33.036883, 130.849557);
var marker = create_maker(point, "竜門ダム", "<a href='http://www.qsr.mlit.go.jp/ryumon/' target='_blank'>竜門ダム</a>");
var point = new google.maps.LatLng(32.320247, 131.012865);
var marker = create_maker(point, "市房ダム", "<a href='http://damnet.or.jp/cgi-bin/binranA/All.cgi?db4=2661' target='_blank'>市房ダム</a>");
var point = new google.maps.LatLng(32.995505, 131.200759);
var marker = create_maker(point, "大蘇ダム", "<a href='http://damnet.or.jp/cgi-bin/binranA/All.cgi?db4=2681' target='_blank'>大蘇ダム</a>");
}
function create_maker(latlng, label, html) {
// radioのHTMLを用意（ラジオグループを分けるために、nameを場所ごとにユニークにしておく）
var hazard_true = "<br><input type=\"radio\" name=\"radio_" + i + "\" value=\"1\" onclick=\"radio_click(this, " + i + ")\">災害あり";
var hazard_false= "<br><input type=\"radio\" name=\"radio_" + i + "\" value=\"0\" onclick=\"radio_click(this, " + i + ")\">災害なし";
// 純正マーカーを生成
var marker = new google.maps.Marker({position: latlng, map: map,title: label});
// マーカーをクリックした時の処理
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(html + hazard_true + hazard_false);
infowindow.open(map, marker);
});
gmarkers[i] = marker;
i++;
return marker;
}
function map_click(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function radio_click(target, markerNum) {
if (target.value == "1") {
gmarkers[markerNum].setIcon({
url: 'https://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
});
} else {
gmarkers[markerNum].setIcon({
url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
});
}
}
google.maps.event.addDomListener(window, "load", inicializar);
</script>
</body>
</html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZMQWy7Sxoe2Uz67wSHBHNkIMqNggY6Lo&callback=initMap"></script>
</head>
<body>
<div id="map_canvas" style="height: 100vh;">
</div>
<script>
var map = null;
var infowindow = new google.maps.InfoWindow();
var gmarkers = [];
var i = 0;
function inicializar() {
// 初期設定
var option = {
// ズームレベル
zoom: 9,
// 中心座標
center: new google.maps.LatLng(32.740485, 131.027392),
// タイプ (ROADMAP・SATELLITE・TERRAIN・HYBRIDから選択)
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), option);
google.maps.event.addListener(map, "click", function() {infowindow.close();});
// ポイントの追加
var point = new google.maps.LatLng(33.036883, 130.849557);
var marker = create_maker(point, "竜門ダム", "<a href='http://www.qsr.mlit.go.jp/ryumon/' target='_blank'>竜門ダム</a>");
var point = new google.maps.LatLng(32.320247, 131.012865);
var marker = create_maker(point, "市房ダム", "<a href='http://damnet.or.jp/cgi-bin/binranA/All.cgi?db4=2661' target='_blank'>市房ダム</a>");
var point = new google.maps.LatLng(32.995505, 131.200759);
var marker = create_maker(point, "大蘇ダム", "<a href='http://damnet.or.jp/cgi-bin/binranA/All.cgi?db4=2681' target='_blank'>大蘇ダム</a>");
}
function create_maker(latlng, label, html) {
// radioのHTMLを用意（ラジオグループを分けるために、nameを場所ごとにユニークにしておく）
var hazard_true = "<br><input type=\"radio\" name=\"radio_" + i + "\" value=\"1\" onclick=\"radio_click(this, " + i + ")\">災害あり";
var hazard_false= "<br><input type=\"radio\" name=\"radio_" + i + "\" value=\"0\" onclick=\"radio_click(this, " + i + ")\">災害なし";
// 純正マーカーを生成
var marker = new google.maps.Marker({position: latlng, map: map,title: label});
// マーカーをクリックした時の処理
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(html + hazard_true + hazard_false);
infowindow.open(map, marker);
});
gmarkers[i] = marker;
i++;
return marker;
}
function map_click(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function radio_click(target, markerNum) {
if (target.value == "1") {
gmarkers[markerNum].setIcon({
url: 'https://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
});
} else {
gmarkers[markerNum].setIcon({
url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
});
}
}
google.maps.event.addDomListener(window, "load", inicializar);
</script>
</body>
</html>
ただ、このコードにはまだ問題があります。
■ラジオボタンのチェックが保持されない
ページを再読込したり、他のマーカーをクリックするとチェックが消えます。
今のままのロジックで実現するのであれば、ラジオボタンをチェックした際に、選択した値を保持。ラジオボタン生成時には、保持した値をもとにcheckedを分岐させる方法が考えられます。
値を保持するのは、変数を用意する、または値をサーバに送信して、データベースで保持する方法が考えられます。
Webアプリケーションとしては、ページごとに値が消えてしまっては困るので、一般的には後者になるでしょうか。
いずれにしても、値を保持する方法によってコードも変わること。加えて、学びの機会を無くしてしまうのでこの状態であげました。
あとは試行錯誤しながら、目標の機能までがんばってみてください。
ご質問などありましたらお気軽に追記ください。
馬場誠 さん
06月26日 07時49分
