• HOME
  • Diary
  • グーグルマップのカスタマイズ

グーグルマップのカスタマイズ

<script src="//maps.google.com/maps/api/js?sensor=true&language=ja"></script>
<script src="js/map.js"></script>

map.js

function initialize(){
	var e=new google.maps.LatLng(座標1,座標2),
	a={zoom:17,center:e,scrollwheel:!1,mapTypeControlOptions:{mapTypeIds:["sample",google.maps.MapTypeId.ROADMAP]}},
	o=new google.maps.Map(document.getElementById("map_canvas"),a),
	s=new google.maps.MarkerImage("img/pin.png",new google.maps.Size(90,90),new google.maps.Point(0,0)), //アイコンの読み込み
	p={position:e,map:o,icon:s,title:"ほげほげ"},
	t=(new google.maps.Marker(p),
		[ //この中身でスタイルの変更

		]
	);
	o.setOptions({styles:t});
		var i={name:"Squeeze Inc"},
			l=[ //この中身でスタイルの変更
			{stylers:[]},
			{
				'featureType':"poi",
				'elementType':"labels.icon",
				'stylers':[{visibility:"off"}
			]
		}
	],
	n=new google.maps.StyledMapType(l,i);
	o.mapTypes.set("sample",n),
	o.setMapTypeId("sample")
}google.maps.event.addDomListener(window,"load",initialize);
//# sourceMappingURL=mapstyle.js.map

あとは要素を用意してCSSで装飾を掛けて終了です。
ttps://developers.google.com/maps/documentation/javascript/styling?hl=ja
ドキュメント