前提・実現したいこと
かなりの初心者のためとんちんかんなこともしているかもしれませんが、お許しください。できる限り調べてから質問させていただいております。
JSを使ってグーグルマップに表示されるマーカーをオリジナルの画像に変更し、さらにそれらに個別のリンク先を追加したいです。
発生している問題・エラーメッセージ
地図のみのページを作成しているのですが、エラーが起き、表示されません。
https://www.tam-tam.co.jp/tipsnote/javascript/post7755.html
こちらのブログを参考にしています。
該当のソースコード
var map; var marker = []; var infoWindow = []; var markerData = [ // マーカーを立てる場所名・緯度・経度 { name: 'TAM 東京', lat: 35.6954806, lng: 139.76325010000005, icon: './pin-image/tokyo-tower.jpg', // TAM 東京のマーカーだけイメージを変更する }, { name: '小川町駅', lat: 35.6951212, lng: 139.76610649999998, icon: './pin-image/shinsekai.jpg' }, ]; function initMap() { // 地図の作成 var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成 map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む center: mapLatLng, // 地図の中心を指定 zoom: 15 // 地図のズームを指定 }); // マーカー毎の処理 for (var i = 0; i < markerData.length; i++) { markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成 marker[i] = new google.maps.Marker({ // マーカーの追加 position: markerLatLng, // マーカーを立てる位置を指定 map: map // マーカーを立てる地図を指定 }); // マーカーにクリックイベントを追加 function () { marker[i].addListener('dblclick', function() { // マーカーをダブルクリックしたとき window.open('link', '_blank'); // リンクへ飛ばす(マーカーごとの"link"先に飛ばすイメージです。) }); } } marker[0].setOptions({// TAM 東京のマーカーのオプション設定 icon: { url: markerData[0]['icon'],// マーカーの画像を変更 size: new google.maps.Size(80,80), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(16,16), scaledSize: new google.maps.Size(80, 80), link:"http://www.google.com", //ここで個別のリンク先を指定していくイメージなのですが、やり方がわかりません。。。 } }); marker[1].setOptions({// TAM 東京のマーカーのオプション設定 icon: { url: markerData[1]['icon'],// マーカーの画像を変更 size: new google.maps.Size(80,80), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(16,16), scaledSize: new google.maps.Size(80, 80) link:"http://www.yahoo.co.jp"//ここで個別のリンク先を指定していくイメージなのですが、やり方がわかりません。。。 } }); }
試したこと
自作ではどうしても上手くいかなかったので、
ここまでのコードはほとんどがブログで拝見したものをそのまま使っています。
補足情報(FW/ツールのバージョンなど)
GoogleMapAPI v3
回答1件
あなたの回答
tips
プレビュー