この記事は、最後の更新から1623日を超えています。

2017.11.19 ／ 2017.12.7 update

Googleマップ表示用の関数【javascript】

※追記(2017/12/7)

※新規記事にて、使いやすくしたプラグインを配布しています。

ダウンロードはこちらの記事から

Googleマップの表示について

Googleマップをwebページに埋め込む場合、Googleが提供しているAPIを使って座標やアイコンを設定します。しかし、毎回コードを書き直していると面倒なので、関数化してファイルを読み込むだけで使えるようにしています。そのうちきっちりコードを整理したいのですが、とりあえずコードを載せておきます。

使い方

関数を使う前に、Google Maps API からキーを入手してください。
※今後、入手方法も記事にしたいと思います。
キーを入手したら、下記コードをコピーし、名前を付けて保存(ここではmymap.js)

mymap.js


/* 引数 → 表示する要素のid名, 緯度,経度, 拡大率, マップ名, アイコンURL,アイコン横幅,アイコン縦幅 */
function initialize(mymap_id, mymap_lat,mymap_lng, mymap_zoom, mymap_name, mymap_icon,icon_width,icon_height) {

    var latlng = new google.maps.LatLng(mymap_lat,mymap_lng);
    var myOptions = {
        zoom: mymap_zoom,
        center: latlng,
        scrollwheel: false,
        mapTypeControlOptions: { mapTypeIds: ['mapid', google.maps.MapTypeId.ROADMAP] }
    };
    var map = new google.maps.Map(document.getElementById(mymap_id), myOptions);
    if( mymap_icon=='' ){
        var markerOptions = {
            position: latlng,
            map: map,
            title: mymap_name
        };
    }else{
        var icon = new google.maps.MarkerImage(mymap_icon,
            new google.maps.Size(icon_width,icon_height),
            new google.maps.Point(0,0)
        );
        var markerOptions = {
            position: latlng,
            map: map,
            icon: icon,
            title: mymap_name
        };
    }
    var marker = new google.maps.Marker(markerOptions);
    var styleOptions = [
        {
            "stylers": [
                { "visibility": "simplified" }
            ]
        }
    ];
    var styledMapOptions = { name: mymap_name }
    var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
    map.mapTypes.set('mapid', sampleType);
    map.setMapTypeId('mapid');
}

あとは、下記コードを参考にapstyle.jsを読みこんでみてください。


<body>

<div>
    <p>Google Maps APIで指定したドメインでのみ表示可能。</p>
    <div id="mymap" style="width: 100%; height: 400px;"></div>
</div>

<!-- Google Maps APIで取得したキーを指定してAPIを読み込み -->
<script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを指定"></script>

<!-- マップ作成用のjavascriptを読み込み -->
<script type="text/javascript" src="./mymap.js"></script>

<!-- 座標などを指定して、マップ作成 -->
<!-- 下記スクリプトは、</body>の直前に書くか、読み込みを遅らせること -->
<script>
google.maps.event.addDomListener(
    window, 'load',
    initialize(
        //'表示する場所のid名', 座標1, 座標2, ズーム倍率(17ぐらいが妥当), 
        'mymap',35.710058, 139.810694, 17,

        //'地図の名前','アイコンのパス(空にすればデフォルト)',アイコンファイルの横幅,アイコンファイルの高さ
        'スカイツリー','',0,0
    )
);
</script>

</body>

関連記事

▲