日々進化しているGoogle Maps。API経由だ地図をカスタムしたりすることができるので、「Google Maps JavaScript API v3」 を使って、地図のスタイル変更、マーカーの画像化、吹き出しの設定をしてみました。

今のところAPIキー無しでも利用することが出来ますが、Google推奨していないのでキーを発行してもらって使ったほうが良いです。手順はGoogle Maps JavaScript API v3のサイトで説明されています。

API経由で地図の場所を指定する場合、緯度・軽度で指定します。住所しかわからない場合はこちらのサイトでアプリ作ってくれているので調べることができます。

コントローラー周りを消したい場合、各項目をfalseにすれば消えます。

Example

Code

<script  type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.710208, 139.812734);
var myOptions = {
zoom: 12,
center: latlng,
//panControl: false, //（移動 コントロールの表示）
//zoomControl: false, //（ズーム コントロールの表示）
//mapTypeControl: false, //（マップ タイプ コントロールの表示）
//scaleControl: false, //（スケールの表示）
//streetViewControl: false, //（ペグマンの表示）
//rotateControl: false, //（回転コントロールの表示）
//overviewMapControl: false, //（概観マップの表示）
mapTypeControlOptions: {
mapTypeIds: ['mono', google.maps.MapTypeId.ROADMAP]
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
/* 地図のスタイル設定 */
var styleOptions = [{
'elementType': 'geometry',
'stylers': [{
'gamma': 0.8
}, {
'saturation': -100
}, {
'visibility': 'simplified'
}, {
'lightness': 20
}]
}, {
'elementType': 'labels',
'stylers': [{
'visibility': 'off'
}]
}, {
'featureType': 'poi.park',
'elementType': 'geometry',
'stylers': [{
'lightness': 30
}, {
'visibility': 'on'
}]
}, {
'featureType': 'road.highway',
'elementType': 'geometry',
'stylers': [{
'visibility': 'simplified'
}]
}, {
'featureType': 'landscape',
'elementType': 'geometry',
'stylers': [{
'visibility': 'on'
}]
}, {
'featureType': 'road',
'stylers': [{
'lightness': 100
}]
}, {
'featureType': 'transit.line',
'elementType': 'geometry',
'stylers': [{
'visibility': 'on'
}, {
'lightness': 30
}]
}, {
'featureType': 'poi.business',
'elementType': 'geometry',
'stylers': [{
'lightness': -10
}, {
'visibility': 'on'
}]
}];
//地図の切り替えボタン
var styledMapOptions = {
name: 'モノクロ地図'
}
var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('mono', monoType);
map.setMapTypeId('mono');
//マーカー
var image = 'https://dl.dropboxusercontent.com/u/443577/googlemaps_marker/googlemaps_maker.png';
var Marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image//デフォルトのマーカーを表示する場合は指定無し
});
//吹き出しのテキスト
var contentString = 'マップタイトル';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//infowindow.open(map, lopanMarker);//初期状態で吹き出しを表示させる場合は有効にする	
google.maps.event.addListener(Marker, 'click', function() {
infowindow.open(map, Marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>