menu
menu

キーワード検索

 

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

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 6 ↑) 【PHP】PHPでシンプルなメールフォーム
  5. ( 5 - ) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  6. ( 7 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  7. ( - ↑) 【jQuery】入門5. jQueryで日時を表示
  8. ( - ↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 9 - ) 【制作Tips】iPad画面解像度まとめ
  10. ( 3 ↓) 【jQuery】jQueryでドロップダウンメニュー
このエントリーをはてなブックマークに追加

【JavaScript】Googleマップをカスタマイズ

【JavaScript】Googleマップをカスタマイズ

*現在こちらのサンプルは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のデザインがカスタマイズできるコード生成ツール

  • Googleマップ JavaScript
このエントリーをはてなブックマークに追加