GoogleマップAPIで緯度経度とズームレベルを取得する方法
- 質問者はGoogleマップAPIを利用して経度と緯度を取得することはできたが、ズームレベルの取得方法がわからないという問題を抱えている。
- 提供されたソースコードを参考に質問者は緯度と経度の取得方法を実装したが、ズームレベルの取得には苦戦している。
- 質問者はphp/date.phpにデータを渡すためにズームレベルを取得したいが、現在の状況ではできていない。
- ベストアンサー
googleマップAPIにて緯度経度に加えてズームレベルを取得する方法がわかりません
こんにちは、いつもお世話になっています <head> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function onGMapClick(overlay, point) { if (point) { var request = GXmlHttp.create(); var url = "/php/date.php" + "?x=" + point.x + "&y=" + point.y; request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = request.responseXML; var xy = xmlDoc.documentElement.getElementsByTagName("xy"); document.getElementById("show_x").innerHTML = xy[0].getAttribute("x"); document.getElementById("show_y").innerHTML = xy[0].getAttribute("y"); } } request.send(null); } } function onLoad() { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(36.03, 139.15), 13); GEvent.addListener(map, 'click', onGMapClick); } //]]> </script> </head> <body onload="onLoad()"> <div id="map" style="width:450px; height:450px"></div> <P>x : <div id="show_x"></div></P> <P>y : <div id="show_y"></div></P> </body> http://www.geekpage.jp/web/google-maps-api/gxmlhttp-5.php ここのサイトのソースを参考にgoogleマップAPIを利用したサイトを制作しています 経度、緯度の取得はできたのですが、残りのズームレベルの取得がいろいろ試してみましたができません このソースで「経度」「緯度」「ズームレベル」を取得して、変数urlに格納された/php/date.phpにデータを渡したいのですが、現在のズームレベルですら取得できない有様です どなたか教えていただけないでしょうか
- t_getsuei
- お礼率77% (7/9)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
マップオブジェクト変数(map)をグローバル変数にして、 onGMapClickの中からmap.getZoom()で取得できます。 （例） var map; function onGMapClick(overlay, point) { -----略------- var zoom=map.getZoom(); -----略------- } function onLoad() { map = new GMap2(document.getElementById("map")); -----略------- GEvent.addListener(map, 'click', onGMapClick); }
関連するQ&A
- Google Maps APIで特定の住所の地図を表示させたい
Google Maps APIで以下のようなページを作りました。 <body onload="loadMap()"> <div id="map" style="width:450px; height:400px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.441944, -122.141944), 15); map.addControl(new GLargeMapControl()); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } GEvent.addListener(map, 'move', function() { var xy = map.getCenter(); document.getElementById("show_x").innerHTML = xy.lng(); document.getElementById("show_y").innerHTML = xy.lat(); }); // 「移動する」ボタンを押されると実行されます function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } //]]> </script> <p> </p> <form action="#" onsubmit="showAddress(this.address.value); return false"> <p> <input type="text" size="40" name="address" value="渋谷区1-1" /> <input type="submit" value="移動する" /> </p> </form> <p>x</p><div id="show_x"></div> <p>y</p><div id="show_y"></div> </body> これだと、表示させたい住所を毎回入力しないといけないんですが、PHPとMySQLを使ってDBにある住所の地図を表示させたい場合はどのようにすればいいのでしょうか？ <body onload="loadMap()"> を <body onload="showAddress([ここにDBからぬいてきた住所]); return false"> にしてみたんですが機能しません。
- ベストアンサー
- JavaScript
- Google Maps API の IE表示
一部のIEでGoogle Maps APIがうまく作動しません。 Safari/FF/IE8 では表示されます。 以下の処理は一通り試しました。 http://maps.google.com/support/bin/answer.py?hl=ja&answer=21849# よろしくお願いいたします。 ■HTML … <link href="style.css" rel="stylesheet" type="text/css" media="screen, print "/> <link rel="stylesheet" type="text/css" href="map.css" media="screen, print "/> <script type="text/javascript" src="gmap.js"></script> <script src="http://maps.google.com/maps?file=api&v=2&key=●●●" type="text/javascript"></script> … <div id="canvas"></div> … ■JavaScript // JavaScript Document window.onload = function() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("canvas")); var point = new GLatLng(●緯度●, ●経度●) var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml('<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">')}); map.addOverlay(marker); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.setCenter(point, 15); map.openInfoWindowHtml(point, '<img src="●●●.gif"><br/><div id="gma">〒●●●-●●●<br/>●●●<br/><br/>TEL:●●●</div><img src="●●●.jpg">'); } };
- ベストアンサー
- JavaScript
- フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください
フォームの中でgoogleマップAPIの表示がずれてしまいます。教えてください こんにちは、よろしくお願いします <HEAD> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> </HEAD> <FORM> <div id="default-open"> <a href="javascript:;" onclick="document.getElementById('default-close').style.display='block'; document.getElementById('default-open').style.display='none';"> オプションを追加する</a> </div> <div id="default-close" style="display: none;"> <a href="javascript:;" onclick="document.getElementById('default-open').style.display='block'; document.getElementById('default-close').style.display='none';"> 閉じる</a><br> <div id="map" style="width:300px; height:300px; margin-left: 0px; margin-top:0px;"> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.033333, 139.15), 8); } //]]> </script> </div> </FORM> 「オプションを追加する」をクリックしたら、javascriptで下側にgoogleマップAPIが現れるといったコンテンツを作っています マップの表示はできるのですが、中のマップの表示がどうしてもずれたような感じになってしまいます 灰色の帯のようなものがマップの周囲に出てきて、きちんと読み込まれて無いように見えます <div id="default-close">の外側に出すときちんと表示できるので、CSSで制御できないかと頑張ってみましたがうまくできません 上側の<div>タグで細工したのがずれる原因ではないかと思うのですが・・・ 誰かこの問題について分かる方はいないでしょうか
- ベストアンサー
- JavaScript
- グーグルマップについて教えてください。
【やりたいこと】 グーグルマップとストリートビューを連動するところまではできました。しかし、地図をクリックして取得されるデータをマーカーが出るように設定し所までは良かったのですが、そのマーカーをクリックしても必要なデータが表示されません。どの様にしたらいいでしょうか？ ソースは下記の通りです。 var map; var myPano; var panoClient; var currentLatLng = new GLatLng(35.6829, 139.7653); window.onload = function() { load(); loadd(); setEvent(); } function load() { map = new GMap2(document.getElementById("mymap"),{draggableCursor:"crosshair"}); map.setCenter(new GLatLng(35.6829, 139.7653), 8); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl3D()); streetview = new GStreetviewOverlay(); map.addOverlay(streetview); map.addControl(new GOverviewMapControl(new GSize(200,200))); } function loadd() { myPano = new GStreetviewPanorama(document.getElementById("pano")); GEvent.addListener(map,"click", function(overlay,point) { currentLatLng=point; myPano.setLocationAndPOV(currentLatLng); map.setCenter(currentLatLng); }); } function createGMarker(title, html, lat, lng) { var infoObj = new Object(); infoObj.title = title; var gpObj = new GLatLng(lat, lng); var marker = new GMarker(gpObj, infoObj); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); }
- 締切済み
- JavaScript
- HTML5でのgoogle map api v3の
HTML5でのgoogle map api v3の実装についておしえてください。 HTML5でのホームページを初めて制作して、google map api v3を実装したのですが、モダンブラウザとIE8では、問題無く表示されるのですが、IEではバージョンが7以下のブラウザでは、地図表示部分が全く表示されません。 IE6以下のブラウザは仕方無いとしても、IE7では正常に表示させたいのですが、どうしたらバグを解消できるか教えてください。 ソースは下記です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>××</title> <link href="css/page.css" rel="stylesheet" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById('map'); var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(mapdiv, myOptions); }); </script> </head> <body onload="initialize()"> <div id="map"></div> 僕のソースの記述にどこか間違いがあるのか？ それともHTML5では、v3を実装してIE7で正常に表示することができないのか？ いろいろなサイトを見て調べたのですがわかりませんでした。 ホームページを作り始めて間もないので、ご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- Google Maps V3のズームの規制
現在htmlにはhead内に <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=123456&sensor=false"></script> <script language="JavaScript" type="text/javascript" src="v3.js"></script> v3スクリプト内に //functionコード function mapload() { var latlng = new google.maps.LatLng(123,456); var opts = { zoom: 16, center: latlng, //マップタイプHYBRID（航空写真＋地図）ROADMAP（地図）SATELLITE（航空写真）TERRAIN（地形） mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeId: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] } }; //IDコード var map = new google.maps.Map (document.getElementById("map"),opts); //Marker var LatLng = new google.maps.LatLng(123,456); var contentString = 'ここです！'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var image = new google.maps.MarkerImage ('アイコンURL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var shadow = new google.maps.MarkerImage ('アイコン影画像URL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var marker = new google.maps.Marker({ position: LatLng, map: map, title: "ここです！",icon: image,shadow: shadow }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } と記載し、html内のスクリプトのとこに表示しています。 表示される地図のズームを規制したいと考え、mapType.maxZoom = 19; mapType.minZoom = 2;のようなものを記入しても何も変化しません。 上記スクリプトの表記のどこに何を入れれば規制できるのでしょうか。 追伸、google.maps.MapTypeId.TERRAINと地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。
- ベストアンサー
- JavaScript
- Google maps api v3
https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja を参考にコーディングし、いろいろなサイトも調べてながら（手探り）ですが、どうしてもうまく表示されません。 【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。 うまく表示されないというか、画面が真っ白になってしまいます。 アドバイス等ご教示頂ければ幸甚です。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jacascript"> //<![CDATA[ function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.66, 139.69), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("maps.php", function(data) { var xml = parseXml(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[[]i].getAttribute("name"); var address = markers[[]i].getAttribute("address"); var tel = markers[[]i].getAttribute("tel"); var email = markers[[]i].getAttribute("email"); var message = markers[[]i].getAttribute("message"); var point = new google.maps.LatLng( parseFloat(markers[[]i].getAttribute("lat")), parseFloat(markers[[]i].getAttribute("lng"))); var html = "" + name + " " + address; var icon = customIcons[[]type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
- ベストアンサー
- JavaScript
- google map api v3の表示の不具合について教えてください
google map api v3の表示の不具合について教えてください。 google map api v3を実装してマーカーをつけたのですが、あれこれ直していたら表示されない箇所ができてしまいました。（下記画像参照） ソースは下記です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>××</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/page.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById("map"); var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(緯度, 経度), map: map, title: '名称' }); }); </script> </head> <div id="map"></div> お手数かけて申し訳ありませんが、ホームページ初心者なのでご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- googlemap api での 座標の取得
googlemap apiを使って地図上をクリックしたところに 吹き出しをつくり、その中のフォームに情報を入力するという ページを作成してます。 が、うまく座標がとれません。 GEvent.addListener(map, 'click', function(overlay, point) { if (point) { document.getElementById("show_x").innerHTML = point.x; document.getElementById("show_y").innerHTML = point.y; map.openInfoWindowHtml(point,"<form><tableborder=1><tr><td><input type=text id=\"show_x\"><input type=text id=\"show_y\"></td></tr>); としていますが、show_x show_y が <input type=text value=***> のところに 入りません。 <body> 緯度<p id="show_x"></p> 経度<p id="show_y"></p> </body> のところには表示されます。
- 締切済み
- JavaScript
- Google maps API のマーカーを増やす
お恥ずかしながらJavascriptが全く分からない者です。 しかし、必要が生じ、いじっていますが、 下記のソースで、マーカーの個数を増やす場合、 何処のソースをどのように増やせばいいのでしょうか？ また、その他やり方がありましたら、 ご教授いただければと思い、 質問させていただきました。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//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> <title>テスト</title> <link href="../../css/css.css" rel="stylesheet" type="text/css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script src="?http://maps.google.com/maps?file=api&v=2&key=?＊＊＊＊" type="text/javascript"></script> </head> <body> <h1>テスト</h1> <div id="map" style="width: 500px; height: 300px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); var point = new GLatLng(35.852766, 139.794382); map.setCenter(point, 16); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(map, 'click', function(overlay, point) { if (overlay) { overlay.openInfoWindow( document.createTextNode("テスト")); } }); } //]]> </script> </body> </html>
- ベストアンサー
- HTML
お礼
回答ありがとうございます 上のヒントを参考にしていろいろ工夫してみたらできました！ 今回は本当にありがとうございました