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

カレンダー
09 | 2017/10 | 11
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
29 30 31 - - - -
ブログ内検索
カテゴリー
タグリスト

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

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