イチから始めるWeb API活用講座・第2回目

  • 2015/5/7
  • イチから始めるWeb API活用講座・第2回目 はコメントを受け付けていません。

サイト内にgoogleマップの地図が配置されているのを度々見かけることがあります。

Google Maps APIを使って、ご自身のサイトにも地図を置く方法をお伝えします。
ご自身の好みに応じてアレンジする方法も合わせてお伝えします。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Googleマップ</title>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init( )
{
	var abenoharukasu = {
		// ズーム
		zoom: 17,
		// 地図の種類
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		// マップ中心の緯度と経度 小杉クリニック本院
		center: new google.maps.LatLng( 34.649264, 135.515598 )
	};

	var map = new google.maps.Map( document.getElementById( 'map' ), abenoharukasu ) ;

	var marker =getMarker(
		{
			position: new google.maps.LatLng( 34.649829, 135.5178 ),
			title: "大阪市立天王寺中学校",
			map: map
		}
	);
}

function getMarker( option )
{
	var marker = new google.maps.Marker( option );
	return marker;
}

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

</script>
</head>
<body>
	<p>Google Maps v3 天王寺駅から大阪市立天王寺中学校まで</p>
	<div id="map" style="width:650px; height:500px"><div>
</body>
</html>

コードを書く上でのポイントは、

1.Googleマップのjavascriptコードを埋め込む。
(6行目に記載)

2.マップ中心の緯度と経度を設置。
(16行目に記載)
(今回は、駅から目的地を見やすくするため中間地点を配置。)

3.目的地にマーカーを置く。
(23行目に記載)

※緯度と経度はGeocodingを使って計測。
api003

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

関連記事

コメントは利用できません。

ピックアップ記事

  1. 第3回目ではボタンを押すとyoutubeの動画がランダム表示されるものを作成しました。今度はランダム…
  2. ワードプレスでオリジナルテーマを作ってみたい! 全くのイチからの作成手順をご紹介していきたいと思い…

ピックアップ記事

  1. 独学でプログラミング学習に挑戦したは良いが、結局挫折を繰り返す日々。   そんな挫折経験者や…
  2. ネットで調べると実に様々な方法が出てきます。 サーバーによっても様々なアプローチが。 今回私…
  3. 1.さくらVPSにPHP、MySQL、Ruby on Railsを設置。 これらを設置するまで…
  4. 他人様のコンテンツを引っ張ってきて、 自分なりにアレンジを加えた形で 独自のコンテンツとして提供…
ページ上部へ戻る