こんにちは、限界大学院生のりょうです。
Googleマップを自分のサイトで扱うことも増えてきたことでしょう。
埋め込みのシステムを使えばだれでも簡単に自分のwebサイトにGoogleマップを表示できます。
しかしせっかくですからGoogle Maps APIを使用してかわいいい画像のマーカーを立てたりしたいですよね。
今回はGoogle Maps APIを使用してピンを複数個立てたうえで、クリックしたマーカーだけを違う画像にしたいと思います！
今回の完成イメージ
完成イメージは上のようです。
薄いカメラの画像をクリックしたらそれだけ赤く表示されます。
また行きたいなという思いを込めて石垣島のマップを使いました。
ファイル構成
| |- index.html |- cam_be.png |- cam_af.png
今回はこのような構成のフォルダーで作成しました。
cam_be.pngが薄いカメラで、cam_af.pngが赤いカメラの画像です。
コード全体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=（取得したAPIキー）&callback=initMap';
script.async = true;
window.initMap = function () {
map = new google.maps.Map(document.getElementById('map'), { //マップを作成
center: { lat: 24.395519, lng: 124.147053},
zoom: 14
});
var sample_point = [[24.390479, 124.146924],[24.385399, 124.155679],[24.397081, 124.148469]];
var marker = [];
for(var i = 0; i < sample_point.length; i++){ //リストの数だけマーカーを作成
markerLatLng = new google.maps.LatLng({lat: sample_point[i][0], lng: sample_point[i][1]}); // 緯度経度のデータ作成
marker[i] = new google.maps.Marker({
position: markerLatLng,
map:map
});
marker[i].setOptions({ //マーカーに画像を設定
icon: {
url: "./cam_be.png"
}
});
markerEvent(i);
}
function markerEvent(i_marker){
marker[i].addListener('click', function() { //クリックされた時にイベントを実行
for(var j = 0; j < sample_point.length; j++){ //いったんすべての画像を薄いカメラにする
marker[j].setOptions({
icon: {
url: "./cam_be.png"
}
});
}
marker[i_marker].setOptions({ //クリックされた画像だけを赤いカメラにする
icon: {
url: "./cam_af.png"
}
});
});
}
};
document.head.appendChild(script);
</script>
<div style="width:800px;height:400px;" id="map"></div>
</body>
</html>Java Script
JSの部分だけ抜き出してみました。
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=（取得したAPIキー）&callback=initMap';
script.async = true;
window.initMap = function () {
map = new google.maps.Map(document.getElementById('map'), { //マップを作成
center: { lat: 24.395519, lng: 124.147053},
zoom: 14
});
var sample_point = [[24.390479, 124.146924],[24.385399, 124.155679],[24.397081, 124.148469]];
var marker = [];
for(var i = 0; i < sample_point.length; i++){ //リストの数だけマーカーを作成
markerLatLng = new google.maps.LatLng({lat: sample_point[i][0], lng: sample_point[i][1]}); // 緯度経度のデータ作成
marker[i] = new google.maps.Marker({
position: markerLatLng,
map:map
});
marker[i].setOptions({ //マーカーに画像を設定
icon: {
url: "./cam_be.png"
}
});
markerEvent(i);
}
function markerEvent(i_marker){
marker[i].addListener('click', function() { //クリックされた時にイベントを実行
for(var j = 0; j < sample_point.length; j++){ //いったんすべての画像を薄いカメラにする
marker[j].setOptions({
icon: {
url: "./cam_be.png"
}
});
}
marker[i_marker].setOptions({ //クリックされた画像だけを赤いカメラにする
icon: {
url: "./cam_af.png"
}
});
});
}
};
document.head.appendChild(script);クリックされたピンだけ画像を変える
function markerEvent(i_marker){
marker[i].addListener('click', function() { //クリックされた時にイベントを実行
for(var j = 0; j < sample_point.length; j++){ //いったんすべての画像を薄いカメラにする
marker[j].setOptions({
icon: {
url: "./cam_be.png"
}
});
}
marker[i_marker].setOptions({ //クリックされた画像だけを赤いカメラにする
icon: {
url: "./cam_af.png"
}
});
});
}今回のみそになるのはこのmarkerEvent関数です。
どれかのピンがクリックされたらいったんすべてのピンの画像を薄いカメラにして、そのうえでそのピンだけを赤いカメラにするというやり方です。
marker[i].addListener('click', function(){
}の部分でこのピンがクリックされたかどうかを判断しています。
何かに役立てていただけると幸いです。
