Google マップ API V3 入門編 - JavaScript ホームページ制作 | 墨田区

Google マップ API V3 入門編 – JavaScript

LINEで送る
Pocket

グーグル Maps Javascript API V3 で地図を表示するサンプル です。
Google マップでは、カスタマイズでさまざまなことができますが、ここでは 基本のソースをご紹介 いたします。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


Jsサンプルソース

gmap.jsを作ります。

function initialize() {
  var latlng = new google.maps.LatLng(35.710019,139.810681);
  var mapOptions = {
    zoom: 18, // 拡大比率
    center: latlng, // 表示枠内の中心点
    mapTypeId: google.maps.MapTypeId.ROADMAP // 表示タイプ
  };
  var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
}

それではサンプルの説明をしていきます。

var latlng = new google.maps.LatLng(35.710019,139.810681);

google.maps.LatLng を使って、緯度と経度の座標を指定します。
緯度と経度を知るには Googleマップ にアクセスします。

目的の住所や場所の名前を検索ボックスに入れて検索します。
Googleマップで目的地を指定

場所を指定して右クリックすると、メニューが表示されます。
※ピンではなく、地図を右クリックします。
この場所について」をクリックします。
Googleマップ上で右クリックして「この場所について」を選択

すると、検索ボックスに経度と緯度があらわれます。
これをコピペすればOKです。
Googleマップで緯度と経度を取得する


zoom: 18, // 拡大比率

地図を表示する最初のズーム レベルを指定できます。
ズーム 0 は、完全にズームアウトして地球全体を表示した状態です。ズーム レベルを上げるほど、ズームインして解像度が高くなります。


mapTypeId: google.maps.MapTypeId.ROADMAP // 表示タイプ

初期マップタイプを指定します。
サポートされているマップ タイプは次のとおりです。

  • ROADMAP: Google マップの通常のデフォルトである 2D タイルを表示します。
  • SATELLITE: 写真タイルを表示します。
  • HYBRID: 写真タイルと主要な対象物(道路・地名)のタイルレイヤを組み合わせて表示します。
  • TERRAIN: 物理的な起伏を示すタイルで、高度や水系の対象物(山・河川など)を表示します。

htmlサンプルソース

index.htmlを作ります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmap.js"></script>
</head>
<body onload="initialize();">
 <div id="gmap" style="width: 100%; height: 300px; margin: 10px 0;"></div>
</body>
</html>

head タグ内に以下の2行を追加します。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmap.js"></script>

表示したい幅と高さを決めます。

<div id="gmap" style="width: 100%; height: 300px; margin: 10px 0;"></div>

body タグの onload イベントで initialize メソッドを指定すればおしまいです。

<body onload="initialize();">

index.html をブラウザで開いてみると、指定した場所が表示されます。
Googleマップを表示


参考サイト

スタート ガイド – Google Maps JavaScript API v3 — Google Developers


一般的なコーポレートサイトだと、住所などにピンがついていたり、ストリートビューが表示されていたりしますね。次回は 実用編をご紹介したいと思います。
Google マップ API V3 実用編 – JavaScript

おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL