JavaScript / 備忘録

GoogleMapは仕様が変わって有料になり、APIkeyを取得しないとつかえないようになっています。

コーディング内容は大して変わってないから助かるけど、APIkeyつけてJs読み込みからになるため、念のためもう一回登録。

Jsファイル読み込み　※●箇所に取得したAPIKeyをつける

<script src="https://maps.googleapis.com/maps/api/js?key=●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●" async defer></script>

動作コーディング

画面表示で地図を表示し、クリックするとピンが付く基本的機能。緯度経度を登録していたら予めピンを付ける機能付き。（cakePHP3仕様）

var map; //MapObject用
var marker = null; //マーカー
var geocoder; //SearchObject用

var default_gps = {lat: 35.6803, lng: 139.7668293}; // デフォルト 位置情報があれば上書き

// 初期動作
function initMap() {

map = new google.maps.Map(document.getElementById('myMap'), {
center: default_gps, // デフォルト
zoom: 8
});

var lat_lng;
// 緯度経度情報の登録があればピン作成
<?php if(!empty($offer->map_lat) and !empty($offer->map_lng)): ?>
lat_lng = {lat: <?php echo $offer->map_lat; ?>, lng: <?php echo $offer->map_lng; ?>};
createPin(lat_lng, map);
<?php endif; ?>

// クリックイベントを追加
map.addListener('click', function(e) {
lat_lng = {lat: e.latLng.lat(), lng: e.latLng.lng()};
createPin(lat_lng, map);
});

// 住所から位置情報検索用
geocoder = new google.maps.Geocoder();
}

// ピン作成
function createPin(lat_lng, map) {

// 表示してるピンを削除
if(marker != null){
marker.setMap(null);
}
marker = null;

// 座標を表示
//#map_lat #map_lng
document.getElementById("map_lat").value = lat_lng.lat;
document.getElementById("map_lng").value = lat_lng.lng;

// マーカーを設置
marker = new google.maps.Marker({
position: lat_lng,
map: map
});

// 座標の中心をずらす
map.panTo(lat_lng);
}

htmlのbody閉じタグ前にscriptで実行

$(window).on("load reload", function(){
initMap();
})

地図を表示させる場所にIDで指定

<div id="myMap" style="position:relative;width:100%;height:600px;"></div>