GoogleMapは通常インラインフレームで表示させている場合が多いですが、カスタマイズをするには
DOMで表示させる必要があります。
var map; function initMap() { // マップ基本設定 var latLng = new google.maps.LatLng(35.725968, 139.713874); map = new google.maps.Map( document.getElementById("map-inner"), { zoom: 16, // 拡大率 center: latLng, scrollwheel: false // マウスホイールで拡縮しなくなる } ); // マーカーの設定 var markerImg = { url:'img/maplogo.svg', scaledSize : new google.maps.Size(60,72) }; var marker = new google.maps.Marker({ position: latLng, map: map, icon: markerImg }); // 地図をグレースケールに var mapStyle = [ { "stylers": [ { "saturation": -100 } ] } ]; var mapType = new google.maps.StyledMapType(mapStyle); map.mapTypes.set('GrayScaleMap', mapType); map.setMapTypeId('GrayScaleMap'); }
それとGoogleMap用のapiを呼び出すCDNをリンクします
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>