Googlemapをおしゃれにカスタマイズする方法|ホームページ(WEB)制作 長野県:諏訪市・茅野市・岡谷市・松本市のスタジオハロー

メニュー 閉じる

TIPS

この記事は2020年6月4日に書かれたもので、内容が古い可能性がありますのでご注意ください。

Googlemapをおしゃれにカスタマイズする方法

googlemapカスタマイズ

Googleマップを表示させてカスタマイズするには APIキー が必要です。

APIキーの取得

APIキーの使用方法

Google Mapsを表示する場合、ページのヘッダーまたはフッターに Google Maps用のScriptを読み込むコードを記入します。

・静的ページの場合

・WordPressの場合

functions.phpに下記コードを追加します。
※XXXXXXX・・のところにAPIキーを入れます。

/**
 * GoogleMaps jsを追加 footer
 *
 * License: GPLv2 or later
 */
function add_footer_enqueue_scripts_googlemaps_js() {
    wp_enqueue_script( 'googlemapapi', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'add_footer_enqueue_scripts_googlemaps_js', 99 );

または

/**
 * GoogleMaps jsを追加 footer
 *
 * License: GPLv2 or later
 */
function add_footer_enqueue_scripts_googlemaps_js() {
    echo '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>';} add_action( 'wp_footer', 'add_footer_enqueue_scripts_googlemaps_js', 99 ); 

javascriptを用意する

var gmg = new google.maps.Geocoder(),
            map, center, mk ;
        gmg.geocode({
            'address': '35.984499,138.155775'//緯度・経度
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {//cheack
                center = results[0].geometry.location;
                initialize();
                mk = new google.maps.Marker({//marker
                    map: map, position: map.getCenter() ,// マーカーの位置座標
                    icon: "https://www.wp-plan.com/ico.png" ,
                    title: 'Studiohallo'//マーカー画像のtitle
                });
            }
        });
        function initialize() {//初期化
            var options = {
                center: center,
                zoom: 16,//拡大比率
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                panControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                zoomControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                mapTypeControlOptions: {
                    position: google.maps.ControlPosition.TOP_CENTER
                },
                styles: [{
                    stylers: [{//色合いを設定
                        hue: "#603d00"},//カラーコード
                    {   gamma: 0},//ガンマ値
                    {   saturation: -75}]}]//彩度
            };
            map = new google.maps.Map($("#map").get(0), options);//セレクタ内に地図取得
        }

htmlに記述

<div id="map"></div>
Posted in ホームページ制作-TIPS

関連記事