• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:GoogleMapsAPIについて)

GoogleMapsAPIについて試みたがうまくいかない

このQ&Aのポイント
  • GoogleMapsAPIを使用してMySQLの位置情報をPHPから渡して、GoogleMap上にマーカーを作成しようとしたが、うまくいかない。
  • XMLファイルを読み込んでGoogleMap上にマーカーを表示させることはできたが、phpファイルではうまくいかなかった。
  • アドバイスをいただければ幸いです。

質問者が選んだベストアンサー

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.5

こんにちは。 ということは現状をまとめると ・phpの動作は確認できる ・直接URLを叩くとxmlが返ってくる ・JavaScriptで直接xmlを指定すれば動作する ・JavaScriptでxmlを取得しようとすると<?php ・・・ ?>とphpのソースがそのまま表示される ここらの情報から推測すると map.htmlをそのまま開いたりしていませんよね? http://localhost/map.html と開けば downloadUrl("phpsqlajax_genxml.php", function(data) { にて実行されるのは http://localhost/phpsqlajax_genxml.php となり、サーバ上で実行されるのでxmlが出力されるはずです。 仮にそのままmap.htmlを開いたとするとサーバ上で動いているわけではないので <?php ・・・ ?>と表示されてしまうはずです。 もうこのくらいしか思いつきませんでした。

javajavascript
質問者

お礼

動作することが出来ました。 本当にありがとうございました。 知識が乏しいもので…本当にすみません 初歩的なミスでした。 ですが解決できてよかったです。 こんなに丁寧に回答していただけて大変うれしいです。 本当にありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (4)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.4

こんにちは。 >phpファイルをdownloadUrlで読み込む際に、dataの中身にphpsqlajax_genxml.phpのソースがそのまま格納されていました。 直接phpsqlajax_genxml.phpにアクセスするとxmlが表示されますと行っていましたが、 上記の現象はどうみてもPHPが実行されていません。 なのでJavaScriptで取得しているのはxml形式のファイルでないため動作していません。 まずは<?php phpinfo(); ?>のみ記述したphpinfo.phpを適切なディレクトリに配置してURLを指定して表示して見てください。 それで<?php ・・・ ?>が表示されたならphpが動いていません。 まずはそこらへんの検証から必要な気がします。

javajavascript
質問者

補足

遅くなって申し訳ありません。 ご回答ありがとうございます。 <?php phpinfo; ?> のみを記述し、実行したところphpが動いていることを確認できました…

全文を見る
すると、全ての回答が全文表示されます。
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.3

こんにちは。 動きませんでしたか。申し訳ございません。 ちなみにどのような環境で試していますか? ブラウザやサーバー周り等。 あとはFirebug等でデバッグが出来ますが、それで実行してみては如何でしょうか。 動かないのであればなんかしら問題が起きているはずです。

javajavascript
質問者

補足

ご回答ありがとうございます。 ブラウザは、IE,Firefox,chromeを使用しています。 サーバーに関しては、現在phpファイルを実行させるためにXAMPPを使用し、ローカルで行っています。 大学内のPCを使用しています。Windows7 デバッグに関してですが、あまり使い方がわからなかったのですがエラーはでませんでした。 ですが、phpファイルをdownloadUrlで読み込む際に、dataの中身にphpsqlajax_genxml.phpのソースがそのまま格納されていました。 <?php require("sql-info.php"); … ?> 知識が乏しく、回答になっていなくてすみません。

全文を見る
すると、全ての回答が全文表示されます。
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 ということはJavaScriptは恐らく問題無いと思いますので以下が原因かと思います。 header("Content-Type:text/xml; charset=utf-8"); 下記に変更してみてください。 header("Content-Type: application/xml; charset=utf-8"); これで多分動作すると思いますが如何でしょうか。

javajavascript
質問者

補足

ご回答ありがとうございます。 試してみたのですがうまくいきませんでした…

全文を見る
すると、全ての回答が全文表示されます。
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 まず確認なのですが、JavaScriptからではなく直接そのXMLを出力するPHPにアクセスした場合どのような表示になりますか? 想定されているXMLが出力されていますか? または何かエラーになったりしていませんか?

javajavascript
質問者

補足

ご回答ありがとうございます。 XMLを出力するphpに直接アクセスした場合、想定したXMLは表示されています。 また、XMLを出力するphpをXMLファイルにして、そのXMLを読み込むと、GoogleMap上にマーカーが表示されます。 なので、phpファイルは読み込めないという形です。 エラーなどは特には出ていません。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • GoogleMapsAPIv3でXMLを取得(3)

    お世話になっております。 何度か質問しているのですが、新たに質問したいことがあります。 現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。  function initialize() { var myLatlng = new google.maps.LatLng(16.636192,158.9062); var myOptions = { zoom: 1, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var infowindow = new google.maps.InfoWindow; downloadUrl("xml/allplaces.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var linkurl = markers[i].getAttribute("linkurl"); var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>'; var marker = new google.maps.Marker({ map: map, position: point, title: name }); 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); }); } 10行目の downloadUrl("xml/allplaces.xml", function(data) { の部分でXMLを指定していますが、これをHTML上の <input type="button" id="btn" value="" onClick="" /> といった、ボタンファンクションで、異なるXMLを指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。

  • 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>

  • Google Maps API V3のxml

    xmlファイルから読み込んだものを複数カスタムアイコン(情報ウィンドウ付)で表示させたいです。 現在アイコンは読まれずウィンドウも一つの状態です。 xmlからの緯度経度の取得はできるのですが、その他の情報の取得がわかりません。 下記がプログラムソースです。 xmlファイル <?xml version="1.0"?> -<markers> <marker season="" genre="" link="http://www.manyou-kumamoto.jp/castle/" type="culture" lng="130.705841" lat="32.806141" address="熊本県熊本市本丸1-1 " name="熊本城"/> <marker season="" genre="" link="http://www.greenland.co.jp/index2.html" type="reisure" lng="130.464676" lat="32.987690" address="熊本県荒尾市下井手1616" name="三井グリーンランド"/> </markers> javaプログラムソース $(function(){ $.ajax({ url:"map.xml", cache:false, dataType:"xml", success:function(xml){ var data=xmlRequest(xml); initialize(data); } }); }); function xmlRequest(xml){ var data=[]; $(xml).find("markers > marker").each(function(){ var dat={}; dat.lat=this.getAttribute("lat"); dat.lng=this.getAttribute("lng");//この辺の他のノード取得 $(this).children().each(function(){ if(this.childNodes.length>0)dat[this.tagName]=this.childNodes[0].nodeValue; }); data.push(dat); }); return data; } function initialize(data){ var op={ center : new google.maps.LatLng(32.791892438123696,130.704345703125), zoom : 9, mapTypeId : google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("map_canvas"),op); var reisure=new google.maps.MarkerImage( "d_5.ico", new google.maps.Size(48.0,64.0) ); var culture=new google.maps.MarkerImage( "d_6.ico" ); if (data != null) { var i=data.length; } while(i-- >0){ var dat=data[i]; var obj={ position:new google.maps.LatLng(dat.lat,dat.lng), map:map, icon:dat.type //使用の仕方はあってますか? }; var marker=new google.maps.Marker(obj); var infowindow = new google.maps.InfoWindow({ content:'<a href="dat.link"/>kumamoto</a>' //使用の仕方はあってますか? }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } } google.maps.event.addDomListener(window, "load", intialize); よろしくおねがいします。

  • GoogleMap APIマーカーマネージャーとXMLの読み込み

    Google Codeのページ http://code.google.com/intl/ja/apis/maps/documentation/overlays.html#Marker_Manager に載っていたマーカーマネージャーを使用し、さらにGDownloadUrlでXMLを読み込んで http://code.google.com/intl/ja/apis/maps/documentation/services.html 地図を作成しようとしております。 現在記述は以下のようになっています。 ----- var map = null; var mgr = null; var batch = []; function setupMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.66332844365397,139.7321891784668),16); map.addControl(new GLargeMapControl()); map.enableDoubleClickZoom(); window.setTimeout(setupMarkers, 0); } } function getMarkers() { GDownloadUrl("○○○.xml", createMap); return batch; } function createMap(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var markeropts = new Object(); markeropts.title = name; var marker = new GMarker(new GPoint(lng,lat), markeropts); batch.push(marker); // ※1 } return batch; } function setupMarkers() { mgr = new MarkerManager(map); mgr.addMarkers(getMarkers(), 14); mgr.refresh(); } ----- いろいろと検証の結果、XMLの読み込みはうまくいっており、※1のところでbatchにはちゃんとpushされていることは確認したのですが、最終的にマーカーは表示されません。 function getMarkersが function getMarkers() { var batch = []; var markeropts = new Object(); markeropts.title = "六本木"; var marker = new GMarker(new GPoint(35.66332844365397,139.7321891784668), markeropts); batch.push(marker); return batch; } の時はマーカーがちゃんと表示されたことも確認しております。 どこがおかしいのでしょうか? また、根本的に間違っているor他にいい方法があるのであればご教示ください。 よろしくお願い致します。

  • googlemap 、mysqlでサイドバー

    システム設計初心者です。 googlemap 、mysqlでマーカー(クリックで情報ウィンドウ表示)とサイドバーを表示するシステムを作っているのですが、マーカーは表示されたのですがサイドバーが表示されません。 以下にソースを表示しましたので、添削をお願いします。 サイドバーには、mySQLから持ってきたtitleを表示したいと考えています。 宜しくお願いします。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ <!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> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>閲覧画面</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ" type="text/javascript"></script> <script type="text/javascript"> function initialize() { //サイドバーのボタンを作成 createMarkerButton(marker); } //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(35.6894875,139.6917064), 13); // Change this depending on the name of your PHP file GDownloadUrl("posts.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var title = markers[i].getAttribute("title"); var nitiji = markers[i].getAttribute("nitiji"); var message = markers[i].getAttribute("message"); var picture = markers[i].getAttribute("picture"); var point = new GLatLng(parseFloat(markers[i].getAttribute("latitude")), parseFloat(markers[i].getAttribute("longitude"))); var marker = createMarker(point, title, nitiji, message, picture); map.addOverlay(marker); } }); } } function createMarker(point, title, nitiji, message, picture) { var marker = new GMarker(point); var html = "<table>"+"<tr>"+"<td>"+"タイトル:"+"</td>"+"<td>"+ title +"</td>"+"</tr>"+"<tr>"+"<td>"+ "日時:"+"</td>"+"<td>"+nitiji+"</td>"+"</tr>"+"</table>"+ "<h3>"+"コメント:"+"</h3>"+"<h4>"+message+"</h4>"+"<h3>"+"写真:"+"</h3>"+picture; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } function createMarkerButton(marker) { //サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //サイドバーがクリックされたら、マーカーを擬似クリック google.maps.event.addDomListener(li, "click", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <h1>閲覧</h1> <div id="map" style="width: 800px; height: 600px"></div> <div><h3><a href="index.php"/>戻る</a></h3></div> </body> </html> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

    • ベストアンサー
    • MySQL
  • googlemapでの位置の表示

    現在、googlemapを用いて、テーマパークだけを表示させるプログラムを作ってます。 今作っているプログラムは位置情報を読み込む際にxmlファイルから読み込んでいるのですが、xmlファイルの位置情報をランダムに取得して表示させたりすることは出来るのでしょうか?下のxmlファイルでしたら、お台場と東京タワーだけ表示みたいな形で… ↓xmlファイル <markers> <marker lat="35.62882" lng="139.777508" html="お台場" label="お台場" n="1"/> <marker lat="35.658632" lng="139.745411" html="東京タワー" label="東京タワー" n="1"/> <marker lat="35.729539" lng="139.718172" html="サンシャイン60" label="サンシャイン60" n="1"/> <marker lat="35.660423" lng="139.729204" html="六本木ヒルズ" label="六本木ヒルズ" n="1"/> <marker lat="35.7174" lng="139.771347" html="上野動物園" label="上野動物園" n="1"/> <marker lat="35.715491" lng="139.794669" html="花やしき" label="花やしき" n="1"/> <marker lat="35.741964" lng="139.647941" html="としまえん" label="としまえん" n="1"/> <marker lat="35.717588" lng="139.276707" html="東京サマーランド" label="東京サマーランド" n="1"/> </markers> ↓xmlの読み込み部分のjavascript // ===== XML呼出 ===== function readMap(url) { var request = GXmlHttp.create(); request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = GXml.parse(request.responseText); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); map.getInfoWindow().hide(); map.clearOverlays(); for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng"));   var points = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); var n = markers[i].getAttribute("n"); var marker = createMarker(points,label,html,n); map.addOverlay(marker); } なんかいい工夫はあるのでしょうか? やり方も教えていただけると助かります。 何かいい方法がありましたらご教授お願いします。。

  • google mapに複数マーカーを設置する関数

    google mapに複数のマーカーとそれに伴う吹き出しを作成しています。 マーカーの数は上下するのですが、大体30~40個くらいが設置される予定です。 ただできるだけjsのソースを少なくしたいと思っているため、ループでまとめて記述できないかと試行錯誤しています。 ちなみに現状は以下のように記述しています。 * * * * * * * * * * * * * * * * * * * * * * * * * var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, title: 'マーカー2' }); var contentString2 = '吹き出しテキスト'; var infowindow2 = new google.maps.InfoWindow({ position: new google.maps.LatLng(座標), content: contentString2 }); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map,marker2); }); * * * * * * * * * * * * * * * * * * * * * * * * * この「2」の部分を各数字に変えてマーカー分記述していたのですが、 面倒で尚且つソースが非常に多くなるため困っています。 for関数でループさせてみようと思い作成してみたのですが、うまく動作しません。 ちなみに吹き出し内のコメントはすべて違う内容になるため、せめてgoogle.maps.event.addListenerの部分だけでも、と思っています。 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と地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。

  • GoogleMapsAPIのストリートビュー

    GoogleMapsAPIでマーカーをストリートビューで表示させたい GoogleMapsAPIでマーカーを追加し移動もできるようにしましたが、 このマーカーのストリートビューを別窓で表示させる方法を教えていただけないでしょうか マーカーは人型のアイコンではなく、追加したマーカーです よろしくお願いします 以下、ソースです /////////////////////////////////////////////// <script type="text/javascript"> function initialize() { var map = new google.maps.Map( document.getElementById("gMap"),{ zoom : 16, center : new google.maps.LatLng(35.688272,139.696459), mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl : true } ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(35.688272,139.696459), map: map, draggable : true }); } </script> <style> #gMap{ width: 900px; height: 500px; } #View{ width: 900px; height: 300px; border: 1px solid #000; /* この枠線内にストリートビューを表示させたい */ } </style> </head> <body onload="initialize()"> <div id="gMap"></div> <div id="View"></div> </body> ///////////////////////////////////////////////

  • google map吹き出し

    下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>

    • ベストアンサー
    • AJAX
このQ&Aのポイント
  • 携帯紛失した場合、新しい携帯にデータを移行させる方法について教えてください。
  • ESETセキュリティ ソフトウェアの移行方法について教えてください。
  • 携帯紛失後、新しい携帯でESETを使用するためにはどのような手順が必要ですか。
回答を見る

専門家に質問してみよう