質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

348閲覧

GoogleMapAPI でマーカーに個別のリンクを追加したい

procyon8

総合スコア10

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2019/04/14 04:19

前提・実現したいこと

かなりの初心者のためとんちんかんなこともしているかもしれませんが、お許しください。できる限り調べてから質問させていただいております。
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/04/16 05:27

// マーカーにクリックイベントを追加 ↑の関数名が抜けているようですね。typoでしょうか?
procyon8

2019/04/18 08:06

申し訳ありませんでした。 ご協力ありがとうございます。 何とかやりたいことはできました。。。。
guest

回答1

0

自己解決

諦めて個別にfunctionを作りまくることで、一応は解決しました。。。

投稿2019/04/18 08:06

procyon8

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問