2014-12-04(Thu)

OpenLayersを使ってGoogleMapを表示する

test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>OpenLayers Test (Google Maps V3)</title>
</head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://maps.google.co.jp/maps/api/js?v=3.5&sensor=false&language=ja"></script>
<script>
function init() {

var mapCenterLatLng = new OpenLayers.LonLat(139.553146, 35.336063); // Kamukura

var map = new OpenLayers.Map('map_google');

map.addControl( new OpenLayers.Control.LayerSwitcher() );

var gmap_terrain = new OpenLayers.Layer.Google(
"Google TERRAIN",
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
"Google ROADMAP", // the default
{numZoomLevels: 20}
);
var gmap_hybrid = new OpenLayers.Layer.Google(
"Google HYBRID",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gmap_satellite = new OpenLayers.Layer.Google(
"Google SATELLITE",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);

map.addLayers( [ gmap, gmap_terrain, gmap_hybrid, gmap_satellite] );

// Google.v3 uses EPSG:900913 as projection, so we have to
// transform our coordinates

var projection = new OpenLayers.Projection("EPSG:4326");
var mapCenterGoogle = mapCenterLatLng.transform( projection, map.getProjectionObject() );

map.setCenter( mapCenterGoogle, 15 );
}

</script>
<style type="text/css">
#map_google {
width: 100%;
height: 480px;
border: solid 1px #999;
}

</style>

</head>

<body onload="init()">

<div id="map_google" ></div>
</body>
</html>
</body>
</html>

2014-12-04(Thu)

Google Maps JavaScript API V3でGoogleMapを表示する

test.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex,nofollow,noarchive" />
<title>Google Maps サンプル</title>

<script src="http://maps.google.co.jp/maps/api/js?v=3.5&sensor=false&language=ja"></script>

<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(35.709984,139.810703);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
</script>

</head>
<body onload="initialize()">
<p>地図です。</p>

<div id="map_canvas" style="width:500px; height:300px"></div>

</body>
</html>
プロフィール

yaman

Author:yaman

カレンダー
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
ブログ内検索
カテゴリー
タグリスト

バイク 買い物 アキバ 秋葉原 写真 チャレンジツーリング アフィリエイト ゲーム パソコン バトルフィールド カメラ 漫画 道の駅スタンプブック 株式投資 DTV  ロト7 ダーツ バトルフィールド2142 Linux Ubuntu 大戸屋 ハイウェイスタンプ PT2 プログラミング 温泉 Git 飲み食い 書籍 アニメ Windows Ingress SSTR ラジオ会館 日本酒 Windows10 機械工作 TortoiseGit VMware Javascript バトルフィールド4 LightWave  ホビー YSP Windows7 仕事 WHS バトルフィールド3 日曜大工 電子工作 PC CentOS GoogleMap ビリヤード Subversion ドネルケバブ PSP 晩飯 チャンダン 歯医者 Chrome 動画エンコード 料理 THETA 酒造 月例ツーリング ロト6 コミケ ラーメン Windows8 CD バトルフィールド2 宝くじ Android OSM バトルフィールド・バッドカンパニー2 

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
FC2カウンター
現在の閲覧者数
現在の閲覧者数:
Twitter
リンク
RSSフィード
コミックダッシュ