Googleマップを表示させてカスタマイズするには APIキー が必要です。
APIキーの取得
この記事の目次
APIキーの使用方法
Google Mapsを表示する場合、ページのヘッダーまたはフッターに Google Maps用のScriptを読み込むコードを記入します。
・静的ページの場合
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></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>