長野市松本市上田市ホームページ制作アプリコットデザインお問合せ

長野市・上田市・松本市・塩尻市・安曇野市でホームページ制作(WEBサイト制作)ならアプリコットデザイン

BRAND LIST

Google mapをデザインしよう!CONTENT

Posted:2016.09.20 | Category:

地図
ホームページを製作している中で必ずといっていいほど地図を導入しますよね。
そこでお世話になるのがGoogle mapです。

たとえばアプリコットを地図で表示すると・・・



こんな感じで表示されます。
ただ、このままだとせっかくデザインしているサイトがここだけちょっと残念な感じになってしまいますね。。

そこで、せっかくだからGoogle mapをデザインしちゃいましょう!!

head内に記述しよう!

必要なのはjavascriptとgoogleのAPIキーです。

まずはホームページのhead内にjqueryの記述とAPIキーを設定していきます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[ここに取得したAPIキーを記述します。]"></script>


ここでAPIキーが必要となります。
以前まではAPIキーはなくても設定できていたのですが2016年6月22日から新規ホームページの場合はAPIキーが必須になりました。

API Key を取得しよう!

まずは、Google Maps APIsへアクセスします。




リンク先の右上にある「キーを取得」をクリックします。

api01



「キーを取得」をクリックするとモーダルウィンドウが出ますので「続ける」をクリックします。

api02



すると、下記の画面が出てくると思うので「プロジェクトを作成」のまま「続行」をクリックします。

api03


「続行」をクリックすると下記のような画面が表示されるので名前の入力とキー制限でHTTPリファラー(ウェブサイト)にチェックを入れます。

api04
*.example.com/* と表示されているところがあると思うのですが、ここにドメインを入れて設定します。
アプリコットの場合は【apricot-design.com/*】と入力します。
その後、作成をクリックして次に行きます。

そうすると下記のような画面が表示されます。

api05


上記の画面で「閉じる」をクリックすると・・・!
じゃーん!

api06
API Keyを無事取得することができました!
結構簡単に取得できますね!!



無事にAPIキーも取得できたので上記で書いたスクリプトの[APIキー]の中に記述しましょう!

カスタムマップを設置するコードを記述しよう!

続いて、Google Mapをカスタマイズ、表示させるための記述をしていきます。
こちらもhead内に記述していきましょう。


<script type="text/javascript">
function initialize() {
  var myLatLng = new google.maps.LatLng(36.641531, 138.179729); //マップの中心座標
  var myOptions = {
  zoom: 17, //ズームレベル
  center: myLatLng,
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style']
  }
  };
  map = new google.maps.Map(document.getElementById("maparea"), myOptions);
  new google.maps.Marker({
  position: new google.maps.LatLng(36.641531, 138.179729), //アイコンの中心座標
  map: map,
  icon: "https://apricot-design.com/wp-content/themes/apricot-design_pc/images/pin.png" //アイコン画像
  });

  var mapstyle =
//ここからJSON情報貼り付け位置
[ {

} ]
//JSON情報ここまで
;

  var mapType = new google.maps.StyledMapType(mapstyle, myOptions);
  map.mapTypes.set('style', mapType);
  map.setMapTypeId('style');

  google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
  });
  }

function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=[APIキー]&callback=initialize";
document.body.appendChild(script);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>


こんな感じで記述していきます。
オプションはかなりたくさんあるのでここでは割愛します。

後はbodyタグの後ろに
<body onload="initialize()">
を記述します。

そして地図を表示したい所に

<div id="maparea"></div>

と記述します。

これで設置に関してはオッケーです!


Google Mapをデザインしよう!

後はGoogle Mapのデザインを変更していきます。

デザインの変更はStyled Map Wizardのツールで作成します。

上記のサイトにアクセスすると下記のような画面になるので、左側の入力項目をいろいろをいじってみてください!

api07
左の入力項目でいろいろいじってこれでオッケーとなったら右側の「Show JSON」を押しましょう!
そうするとコードが排出されると思うのでコピーします。

コピーしたコードを上記で記述したコードの中の「//ここからJSON情報貼り付け位置」の中に記述します。
記述したコードが下記になります。

<script type="text/javascript">
function initialize() {
  var myLatLng = new google.maps.LatLng(36.641531, 138.179729); //マップの中心座標
  var myOptions = {
  zoom: 17, //ズームレベル
  center: myLatLng,
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'style']
  }
  };
  map = new google.maps.Map(document.getElementById("maparea"), myOptions);
  new google.maps.Marker({
  position: new google.maps.LatLng(36.641531, 138.179729), //アイコンの中心座標
  map: map,
  icon: "https://apricot-design.com/wp-content/themes/apricot-design_pc/images/pin.png" //アイコン画像
  });

  var mapstyle =
//ここからJSON情報貼り付け位置
[
  {
    "elementType": "geometry",
    "stylers": [
      { "saturation": -100 },
      { "gamma": 0.55 }
    ]
  }
]
//JSON情報ここまで
;

  var mapType = new google.maps.StyledMapType(mapstyle, myOptions);
  map.mapTypes.set('style', mapType);
  map.setMapTypeId('style');

  google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
  });
  }


function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=[APIキー]&callback=initialize";
document.body.appendChild(script);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>


これでカスタマイズは完了となります!


出来上がったものがこちらになります。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


まとめ

結構簡単にカスタムマップが設置できましたね!!
以前まではAPIキーがいらなかったのですが、2016年6月22日から必要になったことを最初知らずに結構設置に時間がかかってしまったので、ぜひカスタムGoogol Mapを設置したい方は参考にしていただければと思います。

ただ、ひとつAPIキーについてですが、使用制限があるので注意が必要です。
1日あたり地図の生成回数が25,000回以上の場合にGoogleから課金の連絡が来ます。

詳しくは「API Usage Limits」に記載があります。

せっかくのカスタマイズできるマップですが、制限がついてしまったのが残念ですね。。

ぜひ皆さんも使う機会があれば使用してください!

長野市・松本市・上田市でホームページ制作・通販サイト制作
各種印刷物デザインならアプリコットデザイン

株式会社アプリコットデザイン

[長野オフィス]
〒381-2246 長野県長野市丹波島1-805
TEL.026-217-2184

[松本オフィス]
〒399-0036 長野県松本市村井町南4-12-26
TEL.0263-87-7486

この記事を書いた人Who is writen blog

Matsuzawa Ryoichi / Web Creator

元車の整備士からWEB業界へ転向!アプリコットの次世代エースと噂されているとか、されていないとか。

SEARCH

  • デザインで全ての人を幸せに
  • ブランド戦略型WEBサイト
  • タブロイド紙作ります
  • 開業・企業パック
  • ブランディング
  • 信州ファーム
  • アプリコットマグ

AREA

対応エリア

長野市、松本市、上田市、岡谷市、飯田市、諏訪市、須坂市、小諸市、伊那市、駒ヶ根市、中野市、大町市、飯山市、茅野市、塩尻市、佐久市、千曲市、東御市、安曇野市、小海町、川上村、南牧村、南相木村、北相木村、佐久穂町、軽井沢町、御代田町、立科町、青木村、長和町、下諏訪町、富士見町、原村、辰野町、箕輪町、飯島町、南箕輪村、中川村、宮田村、松川町、高森町、阿南町、阿智村、平谷村、根羽村、下條村、売木村、天龍村、泰阜村、喬木村、豊丘村、大鹿村、上松町、南木曽町、木祖村、王滝村、大桑村、木曽町、麻績村、生坂村、山形村、朝日村、筑北村、池田町、松川村、白馬村、小谷村、坂城町、小布施町、高山村、山ノ内町、木島平村、木島平村、信濃町、小川村、飯綱町、栄村など長野県内全域

北海道、青森、岩手、宮城、秋田、山形、福島、東京、神奈川、埼玉、千葉、茨城、栃木、群馬、山梨、新潟、長野、富山、石川、福井、愛知、岐阜、静岡、三重、大阪、兵庫、京都、滋賀、奈良、和歌山、鳥取、島根、岡山、広島、山口、徳島、香川、愛媛、高知、福岡、佐賀、長崎、熊本、大分、宮崎、鹿児島、沖縄まで全国

TOPICSトピックス

TOPICSトピックス

PICK UPピックアップ

  • デザインノートに掲載されました
  • デザインで人を幸せにする会社
  • ブランド戦略型ホームページ制作
  • 開業起業される方へ
  • アプリコットデザイン
  • コーポレートサイト
  • 信州ファームデザイン
  • 信州ファームマーケット
  • ポケット
  • アプリコットマグ
  • ブランシュール

CONTACTお問合せ

デザインで人々を幸せにしたい。
デザインにはその力があります。I want to make people happy by design.
Design has that power.

デザインが全てだとは決して思いません。
デザインの良し悪しだけで、ビジネスが左右されるとも思っていません。
だけど、デザインの力はとても大きいことも知っています。
私たちが考える良いデザインとは、お客様の伝えたい想いを
より的確に、効果的に表現する手段だと考えます。
伝えたい想いは、間違った伝え方をしてしまうと伝わりません。
また、人を惹きつけるデザインでないと見てもらうことすら困難です。
私たちは日々努力を重ね、今日もそれらデザインに磨きをかけています。
そして制作する過程において、デザインを作ることよりも、お客様の伝えたい想いを
汲み取る事の方が制作するよりも重要だと考えます。
それらの結果、見た目も効果も併せ持った、優れたデザインとなります。
優れたデザインはビジネスの成長を促し、収益をもたらします。
私たちは、デザインを通して、一人でも多くの人を幸せにしたいと考えます。
デザインには人を幸せにする力があると信じています。

アプリコットの想いアプリコットの想い