Mapsでオリジナルのピンを表示させたい場合、ただ表示させるだけではなくクリックしたときに吹き出しを表示させて、その場所がなんなのか表示させたいことがあります。APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。APIを使う1番のメリット(理由)はオリジナルのピンを設置できることです。APIっていうのを使わないといけないらしい」となって使う人も多いのでは無いでしょうか?今回はそんなオリジナルのピンの設定方法についてまとめておきます。APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。APIでマップを表示させます。id="map"></div>&...そして、オリジナルのピンの表示方法は下記の記事で解説しています。APIを使う1番のメリット(理由)はオリジナルのピンを設置できることです。APIっていうのを使わないといけないらしい」となって使う人も多いのでは無いでしょうか?今回はそんなオリジナルのピンの設定方法についてまとめておきます。APIの初期設定については過去に記事にしてあるのでそちらをご覧ください。APIでマップを表示させます。APIでオリジナルのピンを表示させます。APIで吹き出しを表示させたい場合はInfoWindowを使用します。InfoWindowの定義InfoWindowのcontentプロパティに表示させたいテキストを入力します。class="window">InfoWindow内のテキスト</div>'})テキストだけでもいいですし、HTMLタグを書くこともできるので、<img>を使って画像を表示させるのも可能です。マーカークリック時にInfoWindowを開く現状マーカーの定義とInfoWindowの定義が終わっている状態なので、「マーカーをクリックしたときに、InfoWindowを表示させる」コードを追加します。マーカーの指定)でマーカーのすぐ上に表示されるようになります。実際に表示を確認して、マーカーをクリックすると下記のような吹き出しが表示されます。表示されていれば、InfoWindowの表示は成功です。マサカズ@31mskz101997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。Webrandum表示設定ダークモードこの機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。システム設定に合わせる。