次の例では、GPSにより緯度経度を取得します。
その緯度経度を地図の中心点にして、マーカと吹き出しを表示します。
吹き出しはタッチ（マウスダウン）すると閉じます。
⇒スマートフォン・タブレット向けに全画面で表示させるにはこちらをご覧ください。
スマートフォン・タブレットで利用可能なイベントはPCと異なります。
また、このサンプルではviewportを利用しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <script src="http://test.api.its-mo.com/cgi/loader.cgi?key=JSZ752c40ded32d&ver=2.0&api=zdcmap.js,userwidget.js&enc=SJIS&force=1" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map, msg, watchId, mrk = null, lat = 35.6778614, lon = 139.7703167, latlon = new ZDC.LatLon(lat, lon); /* 初期表示時に実行される */ function getGps() { if (typeof navigator.geolocation == 'undefined'){ /* 位置情報が利用できません */ alert("\u4f4d\u7f6e\u60c5\u5831\u304c\u5229\u7528\u3067\u304d\u307e\u305b\u3093"); loadMap(); } else { /* GPSの位置情報を取得できるブラウザ */ watchId = navigator.geolocation.getCurrentPosition( successCallback, errorCallback ); } }; /* 位置情報の取得に成功したときは、取得した位置を中心点として地図を作成する */ function successCallback(position){ /* 世界測地系でGPSの座標を取得 */ var wgs = new ZDC.LatLon(position.coords.latitude, position.coords.longitude); /* 測地系を日本測地系に変換 */ var tky = ZDC.wgsTotky(wgs); latlon = tky; loadMap(); }; /* 位置情報の取得に失敗したときは、デフォルトの緯度経度を中心点として地図を作成する */ function errorCallback(err){ /* 現在地取得に失敗しました */ alert("\u73fe\u5728\u5730\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f"); loadMap(); }; /* 地図とウィジットを作成する */ function loadMap() { map = new ZDC.Map( document.getElementById('ZMap'),{ latlon: latlon, zoom: Number(document.getElementById('zoom-select').value) }); /* 地図の縮尺レベルを変更したとき、プルダウンのメニューを変更する */ ZDC.addListener(map, ZDC.MAP_CHG_ZOOM, function(){ document.getElementById('zoom-select').value=map.getZoom(); }); /* マーカを作成 */ mrk = new ZDC.Marker(latlon,{ color: ZDC.MARKER_COLOR_ID_BLUE_S }); /* マーカを追加 */ map.addWidget(mrk); /* 吹き出しを作成 */ msg = new ZDC.MsgInfo(latlon,{ /* 現在地 */ html: '<div><b>\u73fe\u5728\u5730</b></div>', offset: ZDC.Pixel(0, -18) }); /* 吹き出しを追加 */ map.addWidget(msg); msg.open(); /* 拡大ボタンを作成 */ var plus = new ZDC.StaticUserWidget( { bottom: 70, left: 10 }, { html:'<img src="../img/ctrl_plus.png">', size: new ZDC.WH(39, 47) } ); /* 拡大ボタンを追加 */ map.addWidget(plus); plus.open(); /* 縮小ボタンを作成 */ var minus = new ZDC.StaticUserWidget( { bottom: 20, left: 10 }, { html:'<img src="../img/ctrl_minus.png">', size: new ZDC.WH(39, 47) } ); /* 縮小ボタンを追加 */ map.addWidget(minus); minus.open(); /* マーカをクリックしたときの動作 */ ZDC.addListener(mrk, ZDC.MARKER_MOUSEDOWN, function(){ msg.open(); }); /* 吹き出しをクリックしたときの動作 */ ZDC.addListener(msg, ZDC.MSGINFO_MOUSEDOWN, function(){ msg.close(); }); /* 拡大ボタンをクリックしたときの動作 */ ZDC.addListener(plus, ZDC.STATICUSERWIDGET_MOUSEDOWN, function(){ map.zoomIn(); }); /* 縮小ボタンをクリックしたときの動作 */ ZDC.addListener(minus, ZDC.STATICUSERWIDGET_MOUSEDOWN, function(){ map.zoomOut(); }); }; /* プルダウンからの縮尺レベル変更 */ function changeZoom() { var zoom = Number(document.getElementById('zoom-select').value) map.setZoom(zoom); }; //]]> </script> </head> <body onload="getGps();"> <div> <div id="ZMap" style="margin:5px; border:1px solid #777777; top:0px; left:20px; width:308px; height:308px; position:absolute;"></div> <div style="top:10px; left:200px; position:absolute;"> <select id="zoom-select" onchange="changeZoom();"> <option value="0">640km(広域)</option> <option value="1">320km</option> <option value="2">160km</option> <option value="3">80km(都道府県)</option> <option value="4">40km</option> <option value="5">20km</option> <option value="6">10km</option> <option value="7">5km(市区町村)</option> <option value="8" selected="selected">2.5km</option> <option value="9">1.2km</option> <option value="10">600m(市街図)</option> <option value="11">300m</option> <option value="12">150m(詳細)</option> </select> </div> </div> </body> </html>