Googleマップで事業所の場所を表示する際、左上に表示される場所情報（住所や口コミなど）を非表示にしたい場合、Google Maps APIを使う方法が有効です。本記事では、初心者でも簡単にできる方法をステップバイステップで解説します。
Google Maps APIを使った地図の作成方法
Google Maps APIを使用することで、埋め込みコードをカスタマイズでき、場所情報パネルを非表示にすることができます。まず、APIキーを取得し、基本的な地図を表示するための設定を行い、その後、場所情報を非表示にするための設定を行います。
必要な準備
まず、Google Cloud Platformにアクセスし、APIキーを取得する必要があります。以下の手順で準備を進めます。
- Google Cloud Consoleでプロジェクトを作成
- Maps JavaScript APIを有効化
- APIキーを発行
場所情報パネルを非表示にするコード例
次に、場所情報パネルを非表示にするためのコードを作成します。下記の例では、Googleマップに会社の場所を表示し、場所情報パネルを非表示にしています。
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 35.6895, lng: 139.6917}, zoom: 10 }); var marker = new google.maps.Marker({ position: {lat: 35.6895, lng: 139.6917}, map: map, title: '会社の所在地' }); // 住所情報などのパネルを非表示にする設定 map.setOptions({ disableDefaultUI: true, zoomControl: true });}マップをウェブサイトに埋め込む
上記のコードを作成したら、次にウェブページに地図を埋め込みます。以下のようにHTMLに記述します。
<div id="map" style="width: 100%; height: 500px;"></div> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>API設定の注意点
APIキーを使う際は、必ず適切な制限を設定して、セキュリティを確保することが重要です。APIキーの発行後、IP制限やHTTPリファラ制限を設定して、不正アクセスを防ぐことが推奨されます。
まとめ
Google Maps APIを使うことで、会社の住所を入力するだけでシンプルな地図を表示し、左上の場所情報パネルを非表示にすることができます。初心者でも簡単に実装できる方法を紹介しましたので、ぜひ試してみてください。
コメント