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

カレンダー
07 | 2017/08 | 09
- - 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 Linux 大戸屋 Ubuntu PT2 プログラミング 温泉 Git 飲み食い 書籍 アニメ SSTR Windows Ingress ラジオ会館 道の駅スタンプブック 機械工作 日本酒 Javascript VMware TortoiseGit バトルフィールド4 LightWave ホビー  バトルフィールド3 仕事 WHS 日曜大工 Windows7 電子工作 ビリヤード YSP CentOS GoogleMap Subversion PC ドネルケバブ PSP 晩飯 チャンダン 歯医者 Windows8 動画エンコード 料理 Windows10 THETA ロト6 酒造 コミケ ラーメン Chrome CD バトルフィールド2 宝くじ Android OSM バトルフィールド・バッドカンパニー2 

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