menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

Googleマップをカスタマイズ

  • Labs

Googleマップをカスタマイズ

こんにちは(・∀・)

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

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

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

Googleマップのカスタマイズ

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

サンプル
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>
Result

通常のGoogleマップ。

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


参考

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

  • カテゴリー:Labs