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

カレンダー
05 | 2018/06 | 07
- - - - - 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
ブログ内検索
カテゴリー
タグリスト

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

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