menu
menu

キーワード検索

 

最近の投稿

Googleマップをカスタマイズ

  • Labs

Googleマップをカスタマイズ

こんにちは(・∀・)

Styled Maps WizardというサイトでGoogleマップをカスタマイズすることができるのはご存知でしょうか。

ただしこちらのサイト、英語なのでちょっとわかりづらいかもしれません。

でも安心してください、とても簡単にGoogleマップをカスタマイズできる日本語のサイトがあります。こちらのコードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツールというサイトのコード生成ツールを使えば簡単にGoogleマップのカスタマイズができてオリジナルデザインのGoogleマップを作成することができます。

Googleマップのカスタマイズ

こちらのサイトですが、簡単にカスタマイズすることを目的としているようでカスタマイズはピン画像と色の変更のみとなっております。ですが、それだけでもマップのイメージはだいぶ変わると思います。サンプルでマップを出力してみましたのでぜひご参考にしてみてください。

サンプルデモ

通常のGoogleマップ。

こちらはカスタマイズしたGoogleマップです。hueの色味を青くしてピン画像を変更しました。

JavaScript

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript">
 function googleMap() {
 var latlng = new google.maps.LatLng(35.679808, 139.764887);/* 座標 */
var myOptions = {
 zoom: 16, /*拡大比率*/
center: latlng,
 mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
 };
 var map = new google.maps.Map(document.getElementById('map1'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/
 new google.maps.Size(70,50),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
 );
var markerOptions = {
 position: latlng,
 map: map,
 icon: icon,
 title: 'KITTE',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
 };
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
 {
 "stylers": [
 { "hue": '#9fb7d4' }
 ]
 }
 ];
var styledMapOptions = { name: 'KITTE' }/*地図右上のタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
 map.mapTypes.set('style', sampleType);
 map.setMapTypeId('style');
 };
 google.maps.event.addDomListener(window, 'load', function() {
 googleMap();
 });
 </script>
 <div class="maps" id="map1"></div>
参考

コードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツール

  • カテゴリー:Labs