GoogleMAPのピンを任意の画像に変える方法

GoogleMAPのピンを任意の画像に変える方法

こんなのが作れます。

手順は次の通り。

  1. htmlファイルを作る
  2. CSSファイルを作る
  3. Maps JavaScript APIを取得する
  4. javascriptコードを書く
  5. 動作確認

htmlコードの例

マップを表示したい箇所に下記のコードを設置します。

<div id="gmap"></div>

CSSの例

マップの幅と高さを設定しないと(0pxのままだと)マップを目視確認できないので、下記のようにwidthとheightをスタイルシートで設定します。

<style type="text/css">
#gmap {
width: 100%;
max-width: 600px;
height: 360px;
}
</style>

Maps JavaScript APIの取得方法

以下のサイトで詳しく説明されていたので参考にしてください。
僕も参考にさせて頂きました。

https://www.webdesignleaves.com/pr/plugins/googlemap_01.html

javascriptコードの例

次に下記のjavascriptコードを埋め込みます。

<script>
function initMap() {
var latlng = new google.maps.LatLng( 37.92231816979515, 140.11662386938718 );
var map = new google.maps.Map(document.getElementById('gmap'), {
zoom: 16,
center: latlng
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: '/gmap/cpin.png', //任意のピンの画像
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=ここに前手順で取得したAPIキーを入れる=initMap"></script>

動作の確認方法

作成したhtmlファイルやピンの画像ファイルをサーバーにアップロードします。

その後アップロードしたWEBサイトにブラウザでアクセスすると、問題がなければ以下のようにGoogleマップが表示されます。

Googleマップのサンプル

以上、Googleマップでピンを任意の画像に変える手順になります。

 

Category: Webサイト作成Tags: Googleマップ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 × three =