GoogleMapの複数ピンの変更

Question

実現したいこと

お店のピンの画像を変更したい

前提

GoogleMapをAPIを使って導入しています。
複数あるお店のピンを画像を使って変更・表示をしたいです。

該当のソースコード

JS記入です。
現在地とお店のピンを指しているプログラムです。

function initMap(){
geocoder = new google.maps.Geocoder()

map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 35.171075437602035, lng:136.88147969620726},

});

var marker = new google.maps.Marker({
position: {lat: 35.171075437602035, lng:136.88147969620726},
map: map,
draggable: true,
title: "初期位置"
});

//マーカーのドロップ（ドラッグ終了）時のイベント
var marker_lat = 0;
var marker_lng = 0;
var markers = new Array();

google.maps.event.addListener(marker, 'dragend', function(e) {
//イベントの引数eの、プロパティ.latLngがmarkerの緯度経度。
document.getElementById("lat").innerHTML = 'マーカーの緯度' + e.latLng.lat();
// $('#lng').text('マーカーの経度' + e.latLng.lng());
console.log('マーカーの緯度' + e.latLng.lat());
console.log('マーカーの経度' + e.latLng.lng());
marker_lat = e.latLng.lat();
marker_lng = e.latLng.lng();
console.log(markers);
for( var i = 0; i < markers.length; i++ ){
var result_distance = calc_distance({lat: marker_lat, lng: marker_lng},markers[i]);
console.log(result_distance);
document.getElementById("shop-"+i).innerHTML = result_distance;

});

試したこと

写真現在のプログラムのプレビュー画面です。
赤ピンを指しているところが指定しているお店なのですが、これを別の画像に差し替えてマップに表示されるようにしたいです。

Answer 1

このあたりではないですか？
Google マップのカスタマイズ: カスタムのマーカー  |  Maps JavaScript API  |  Google for Developers

Comments

[pag_jiro]

回答ありがとうございます。
サイトを開いて中身を確認してみたのですが、同じ形式で書いていないのでどこに挿入すれば良いのか分かりません。
お店のピンは
google.maps.event.addListener(marker, 'dragend', function(e) {
//イベントの引数eの、プロパティ.latLngがmarkerの緯度経度。
document.getElementById("lat").innerHTML = 'マーカーの緯度' + e.latLng.lat();
// $('#lng').text('マーカーの経度' + e.latLng.lng());
console.log('マーカーの緯度' + e.latLng.lat());
console.log('マーカーの経度' + e.latLng.lng());
marker_lat = e.latLng.lat();
marker_lng = e.latLng.lng();
console.log(markers);
for( var i = 0; i < markers.length; i++ ){
var result_distance = calc_distance({lat: marker_lat, lng: marker_lng},markers[i]);
console.log(result_distance);
document.getElementById("shop-"+i).innerHTML = result_distance;
の部分ですが、
サイトの画像表示部分は
const iconBase =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/";
const icons = {
parking: {
icon: iconBase + "parking_lot_maps.png",
},
library: {
icon: iconBase + "library_maps.png",
},
info: {
icon: iconBase + "info-i_maps.png",
},
};
だと思いますが、
どこに挿入したら良いと思いますか？

[Lhankor_Mhy]

お店のマーカーを表示してるのはその部分ではなさそうですよ

[Lhankor_Mhy]

マーカーを作るには、new google.maps.Marker(...)が必要です。
ですが、ご提示のコードには「初期位置」のマーカーを生成している部分しかありませんでした。ですので、ご提示いただいていない部分のコードを改修する必要があると思います。

[pag_jiro]

見直したところ確かにお店のピンはここではなく、記入したコードの下にある
<% @shops.each do |shop| %>
<% if shop.lat && shop.lon %>
(function(){
var contentString = "<%= shop.name %> 住所：<%= shop.address %>";
markers.push({lat: <%= shop.lat %>, lng: <%= shop.lon %>});

var marker = new google.maps.Marker({
position:{lat: <%= shop.lat %>, lng: <%= shop.lon %>},
map: map,
title: contentString
});

})();
<% end %>
<% end %>
の部分でした！申し訳ないです！
上記のところに挿入すると思うのですが、サイト上だと１つ１つ書いて表示させるようなやり方でしたが、rails のeach文を使用しているためその必要はないかと思っています。
その中で指定して書くにはどうしたら良いですか？

[Lhankor_Mhy]

サンプルにある通り、
var marker = new google.maps.Marker({
position:{lat: <%= shop.lat %>, lng: <%= shop.lon %>},
icon: 【アイコンのパス】,
map: map,
title: contentString
});
と書けばいいですね。

もし、お店ごとにアイコン画像を変えるとかになると、shopオブジェクトの中に仕込んでおく必要があるかと思います。PHPですかね？

[pag_jiro]

試したらピンが画像に代わりました！ありがとうございます！
ちなみにこの場合でのピンサイズの変更の仕方は分かりますか？

[Lhankor_Mhy]

このあたりではないですか？
https://developers.google.com/maps/documentation/javascript/markers?hl=ja#complex_icons

[pag_jiro]

下記のような形で挿入してみましたが、サイズが変わりませんでした。
var marker = new google.maps.Marker({
position:{lat: <%= shop.lat %>, lng: <%= shop.lon %>},
icon: '/img/accommodation_icon.png',
size: new google.maps.Size(30, 30),
map: map,
title: contentString

iconと同じ書くはずなので場所は間違いないと思っているのですが、いかがでしょうか？

[pag_jiro]

回答ありがとうございます。
サイズに関してですが、
icon: {
url: '/img/accommodation_icon.png',
scaledSize: new google.maps.Size(50, 50),
},
のように｛｝で埋めてしまえば適応できました！
ここまで回答してくださり、ありがとうございました！
ベストアンサーに選ばせていただきました。