seseragiseven

Googleマップをサイトに表示する_Part2「ストリートビューとの連動、ルートの表示」

前の記事

Googleマップをサイトに表示する_Part1「基本とかマーカー画像とか」

というわけでPart2。前回は目的の場所を中心に地図を表示し、マーカーを画像で表示したりした。
前回までの地図はこんな感じ。

コード

< !DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <title>Google Maps テスト|SESERAGISEVEN</title>
  <link rel="stylesheet" href="css/style.css"/>
</head>
<body>

<div class="wrapper">
  <div id="map"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="//maps.google.com/maps/api/js"></script>
<script>
$(function(){ // jQuery

var map;
var origin = new google.maps.LatLng( 33.590513, 130.421213 ); // 博多駅

map = new google.maps.Map( document.getElementById('map'), {
        zoom: 18,                                 // ズームレベル。大きいほどズームする
        center: origin,                           // 地図の中心点
        mapTypeId: google.maps.MapTypeId.ROADMAP, // 地図タイプ
        scrollwheel: false,                       // マウスホイールでの拡大縮小を許可するか
        scaleControl: true,                       // 縮尺を表示するか
      });

new google.maps.Marker({
    position: origin,         // マーカーを立てる場所の緯度・経度
    map: map,                 // マーカーを配置する地図オブジェクト
    icon: 'img/marker_1.png', // 使用するアイコン画像のパス
    title: '博多駅',          // アイコンにオンマウスした時に表示される文字列
});

});
</script>
</body>
</html>

表示

6

今回まずやりたいのは、上記の地図とストリートビューを連動させること。
仕組みは覚えてしまえば簡単。

続きを読む

Googleマップをサイトに表示する_Part1「基本とかマーカー画像とか」

サイトにGoogleマップを載せているところも今ではたくさんあるけど、そのやり方については結構高度な印象があって、Google公式ドキュメントを見てもブログサイトを見ても初心者には分かりづらかったので勉強してみた。それを備忘録として、自分なりに分かりやすく書いていこうと思う。備忘録って言葉を久しぶりに使った。このサイトのコンセプトなのにね。

なお、この記事はJavaScript、jQueryをある程度使える人を対象として書いていますが、コピペからちょっといじったりして使えたりすると思うので、好きにいじってみてください。

GoogleMapsAPIを読み込む

なにはともあれAPIを読み込む。これを読み込むだけでMapの機能が使える。ありがとうGoogle。

<script src="//maps.google.com/maps/api/js"></script>

この時、APIキーというものが必要になる。キーの取得やAPIの使用はすべて無料。勝手にAPI使わずに申請してねってことで取得しましょう。Googleのデータやリソースを全力で使わせてもらう感じになるので、キーはちゃんと取得しておく。でもこのサイトの説明が分かりやすいから丸投げする。

こうやって取得したキーをさっきのスクリプトに書き込む。

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>

ちょっと前まではキーの設定と一緒に「sensor」という設定が必要だったんだけど、今は必要ない。どうやら不要→必要→不要という流れらしい。ブレブレ。
これでGoogleMapsが使えるようになった。

続きを読む

「戦略シミュレーションゲームの作り方」読んだ感想

一昨日買った「戦略シミュレーションゲームの作り方」をひと通り読み終えたので感想。

戦略シミュレーションゲームの作り方
GAMKIN株式会社 ロバート・ジェイ・ゴールド
翔泳社
売り上げランキング: 30,040

こういう人におすすめ

  • プログラムをやってみたい人/気になってる人
  • ゲーム性やルールを作ったりするのが好きな人
  • Unityみたいな3Dじゃなくて簡単に作ってみたい人

プログラム初心者向けに書かれているので、変数、配列、オブジェクトなどの説明が詳しく書かれている。また、シミュレーションゲームは他のゲームに比べて戦略が大事なので、今後に繋げれる可能性がある。そしてUnityよりやれることは少なくなるけど、その分「ツールを使いこなす努力」の必要も少なくなってくる。これがざっくりとしたおすすめの理由。以下感想。

続きを読む

「戦略シミュレーションゲームの作り方」買った

昨日天神のジュンク堂書店に立ち寄り、いつものクリエイト系棚をウロウロしてたら見つけた。そして色んな種類のゲーム制作本を3時間ぐらい見まくった結果、選んだのがこれ。

戦略シミュレーションゲームの作り方
GAMKIN株式会社 ロバート・ジェイ・ゴールド
翔泳社
売り上げランキング: 22,202

ゲームってものを作ってみたかった

この手の本購入理由はこれに尽きると思う。僕は昔からカードゲームやボードゲームのルールを考えるのが好きで(まともなのはなかった気がするけど)いまも仕事の合間にいつか使うかもと思いながらゲームのルールを考えたりしている。これを使う機会は今まで訪れたことはなかったけど、もしかしたらここで使えるかもしれない。なんにせよまだパラパラ見ただけでちゃんと読んでないので、それから考えることにする。

この本に決めた理由

でもなぜ数あるゲーム制作本の中でこの本を選んだのかというと「JavaScriptで書かれているから」「キャラが萌え風味でモチベが保てそうだから」という安易な感じ。

js用のゲームライブラリEnchant.jsが以前から気になっていたのもあり、自分が分かる言語からとりあえずやってみようと思った。Unityの本も沢山あって3Dゲームが簡単に作れそうだったからだいぶ迷ったけど、最初からハードル上げすぎるのもあれなので。

あと、キャラが可愛いというのは結構大きい。キャラが可愛いとそのキャラをもっといろいろ動かしたいという欲求が湧いてきて、その道中の苦難に対抗できるようになる。いろんなキャラ増やしたいな~とかの欲望が増えるとそれはもう作業ではなくなるので非常によろしい。とりあえず最初は書かれている通りに、楽しく作っていければいいと思う。

カテゴリー

人気の記事