GoogleMapsAPIでストリートビューを表示させる方法
- GoogleMapsAPIを使用してマーカーを追加し、ストリートビューを表示する方法について教えてください。
- マーカーをクリックすると、別ウィンドウでストリートビューが表示されるようにしたいです。
- マーカーは人型のアイコンではなく、追加したマーカーで表示させたいです。
- ベストアンサー
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> ///////////////////////////////////////////////
- kokorock_goo
- お礼率57% (11/19)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
提示されたソースコードの修正ではなく、自分で作成したものですが、 参考になりそうでしたら、ご利用ください。 尚、このページの単純コピペだと、変なところで改行されて動作不良と なることがあるようなので、適宜修正してください。 ////////// 以下ソース <!DOCTYPE html><html><head><title>サンプル</title> <meta http-equiv='Content-Type' content='text/html; charset=shift_jis'> <script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.13&sensor=false'></script> <script type='text/javascript'> var LatLng,mOptions,pOptions,map,pano; function initialize(){ LatLng = new google.maps.LatLng(35.681382, 139.766084); //位置の初期値 mOptions = { zoom: 16, center: LatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('mcanvas'), mOptions); pOptions = { position: LatLng, pov: {heading: 0, pitch: 0, zoom: 1.34 } //方角、仰角、ズームの初期値 }; pano = new google.maps.StreetViewPanorama(document.getElementById('pcanvas'), pOptions); marker = new google.maps.Marker({ map: map, position: LatLng, draggable: true }); google.maps.event.addListener(marker, 'position_changed', function(){ LatLng = marker.getPosition(); pano.setPosition(LatLng); }); } </script></head> <body onload='initialize()'> <div id='mcanvas' style='width:640px; height:240px'></div> <div id='pcanvas' style='width:640px; height:240px'></div> </body></html> 追記： ・ＡＰＩはバージョン３．１Ｘを使用（私は３．０のマーカーが嫌いなので） ・初期位置は東京駅ですが、ビューがないので空白になります
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 あくまでも独自マーカーにこだわるのであれば、マップとストリートビューを連動させる際には、それぞれの移動イベントを拾って逐次他方に反映させてあげるる必要があると思われます。 また、ビューの無い地点が指定された際の処理（デフォルトの表示がどうなるのか調べていませんが）についても考慮する必要があるかも知れません。 ＞js初心者のためアレンジできるかわかりませんが・・・ 初心者の度合いにもよりますが、多少ややこしいかも知れません。 頑張ってください。
お礼
度々ご回答ありがとうございます！ 是非参考にさせていただきます
- fujillin
- ベストアンサー率61% (1594/2576)
ストリートビューって、使ってみたことはほとんどありませんが… マップのデフォルトの人型を利用した方が、ビューの方向や既撮影の道路（青く表示される）などの機能がそのまま利用できるので便利ではないでしょうか？ あえて違うマーカーを利用する理由が見つからないので、人型を利用する例を （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style type="text/css"> #gMap{ width: 900px; height: 500px; } #View{ width: 900px; height: 300px; border: 1px solid #000; } </style> <script type="text/javascript"> function initialize(){ var latlng = new google.maps.LatLng(35.688272,139.696459); var map = new google.maps.Map(document.getElementById("gMap"),{ zoom : 16, center : latlng, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl : true }); var view = new google.maps.StreetViewPanorama(document.getElementById("View"),{ position : latlng, pov : {heading:0, pitch:0} }); map.setStreetView(view); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="gMap"></div> <div id="View"></div> </body> </html> どうしても別のマーカーにする場合は、適当にアレンジしてください。 google mapのapiに関しては、かなり詳しく説明されていますので、たいていの情報は以下から入手できます。 https://developers.google.com/maps/documentation/javascript/reference?hl=ja
補足
回答ありがとうございます 人型のストリートビューとは別に、 今回はあえてマーカーからストリートビューを 表示させたくご質問させていただきました js初心者のためアレンジできるかわかりませんが、 教えていただいたURL等を参考にしてみます！ ありがとうございました
関連するQ&A
- gmap ストリートビュー
普通の地図とストリートビューを両方表示したいですが。 どうもストリートビューのほうが不具合が生じます。 ストリートビューがない場所に近いところのストリートビューを表示したいですが、どうすればいいですか？ IEで見ると、ストリートビューの方角標識がズレてて、修正方法を教えていただけますでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var map_canvas; function initialize() { var initPos=new google.maps.LatLng(35.658613,139.745525); var mapOptions = { center:initPos, zoom:14, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl: true, mapTypeControl : true, mapTypeControlOptions : { style : google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var request = { address: "千葉県佐倉市ユーカリが丘４-５７５-２２" }; var geocoder = new google.maps.Geocoder(); geocoder.geocode(request, procGeocodeCallback); } function procGeocodeCallback(results,status){ var response; if(status == google.maps.GeocoderStatus.OK){ for (var i = 0; i < results.length; i++){ map_canvas.setCenter(results[i].geometry.location); openInfoWnd(results[i].geometry.location, results[i].formatted_address.replace(/^日本, /, '')); var markerOpts = { position : results[i].geometry.location, map : map_canvas }; var marker = new google.maps.Marker(markerOpts); // ストリートビュー表示 var svp = new google.maps.StreetViewPanorama( document.getElementById("street"), { position : results[i].geometry.location, pov : { heading : 90, // 東 pitch : 20, // 斜め上 zoom : 0.5 // ズームアウト } }); map_canvas.setStreetView(svp); // ストリートビューの方角などを求める function checkSTV(){ var pov = svp.getPov(); var hd = pov.heading; // 方角 var pt = pov.pitch; // 見上げる角度 var zm = pov.zoom; // ズーム alert("方角："+hd+"、角度："+pt+"、ズーム："+zm); } } } } function openInfoWnd(latlng,txt){ if( txt === undefined) { txt =""; } else { txt += "<BR>"; } var info = new google.maps.InfoWindow(); info.setContent("<div id=\"gmap_d\">" + "<span>" + "ユーカリが丘" + "</span>" + txt + "</div>".toString()); info.setPosition(latlng); info.open(map_canvas); } google.maps.event.addDomListener(window,"load",initialize); --> </script> <div id="map_canvas" style="width: 450px; height: 300px; float:left"></div> <div id="street" style="width: 300px; height: 300px; float:left"></div>
- 締切済み
- JavaScript
- グーグルマップのストリートビューを適切に表示したい
はじめまして。 ウェブプログラミング初心者です。 ビルの情報を集めたウェブサイトを制作中の者です。 それぞれのビルのグーグルマップとストリートビューを表示したいのですが、 ストリートビューで建物内の店舗が表示されるものがあり どのように調整したらよいか困っています。 道路を表示させるための記述などあるのでしょうか。 下記にソースを添付させていただきます。 ご教示いただければ幸いです。 何卒どうぞよろしくお願いいたします。 <!-- 住所から緯度経度を取得する --> <?php $query =$address; $query = urlencode($query); $url = "http://www.geocoding.jp/api/"; $url.= "?v=1.1&q=".$query; $fp = fopen($url, "r"); while(!feof($fp)) { $line.= fgets($fp); } fclose($fp); $xml = simplexml_load_string($line); ?> <!-- 取得した緯度経度をJavaスクリプト内に入れて地図とストリートビューを表示 --> <script type="text/javascript"> // 変数群 var map,svp; //-------------------------------------------- //初期設定(ページを読み込んだ時に実行する関数) //-------------------------------------------- function initialize() { // 緯度・経度変数 var latlng = new google.maps.LatLng(<?php echo $xml->coordinate->lat; ?>,<?php echo $xml->coordinate->lng; ?>); // 地図のオプション設定変数 var myOptions = { // 向き heading: -20, // 初期のズーム レベル zoom: 17, draggable: false, // 地図の中心点 center:latlng, // 地図タイプ mapTypeId: google.maps.MapTypeId.ROADMAP }; //地図オブジェクト生成 map = new google.maps.Map(document.getElementById('map'), myOptions); // ストリートビューオブジェクト生成 svp = new google.maps.StreetViewPanorama( document.getElementById('svp'),{ position : map.getCenter() }); // ストリートビューオブジェクト詳細設定 svp.setPov({heading: -20, pitch: 0, zoom: 0}); // マップとストリートビューの一致させる為の記述 map.setStreetView(svp); } // function initialize() // ページを読み込んだ時にinitialize()を実行 google.maps.event.addDomListener(window, 'load', initialize); </script>
- 締切済み
- JavaScript
- googlemapについて教えてください。
googlemapでマーカーが追随するようにしたくて、function update(position) の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困ってます。
モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか？よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- 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を指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- GoogleMapAPI V3 にて、マップの表示がずれてしまいます。
GoogleMapAPI V3 にて、マップの表示がずれてしまいます。 Google Map を表示させるタブをクリックすることで、 下記ソースの「id="gmap"」の箇所を display :block で表示させるようにしているのですが、 その際に、マップの表示がくずれてしまいます。 （もちろん「id="gmap"」を初期表示としていた場合はくずれません） V2では、 こちらや、 http://okwave.jp/qa/q4513879.html こちらで http://d.hatena.ne.jp/nitoyon/20050917/p2 解決出来たのですが、V3での解決方法が分かりません。。 どなたかご教授願えないでしょうか。 よろしくお願いいたします。 ----------------------------------------------- <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script> <script type="text/javascript"> var latlng = new google.maps.LatLng(lat, lng); var mapOptions = { zoom: 18, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); </script> </head> <body> ～略～ <--! 写真を表示させるタブ --> <div id="photo" style="display: block;"> ～略～ </div> <--! /写真を表示させるタブ --> <--! Google Map を表示させるタブ --> <div id="gmap" style="display: none;"> ～略～ <div id="inner"> <div id="map_canvas" style="width:600px; height:400px;"></div> ～略～ </div> </div> <--! /Google Map を表示させるタブ --> </body> -----------------------------------------------
- ベストアンサー
- JavaScript
- Google Map （外部から情報ウィンドウ開く
Google Maps API v3 において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************１件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************１件目のデータ*************** // ***************２件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************２件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1 <a href="javascript:myclick(0)">あいうえお商店</a></p> 2 <a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- グーグルマップのサイズが変更できない
ここでの質問じゃなかったらすみません； 以下のようにグーグルマップを使用しています。 google.load('maps', '3.0', {other_params: 'sensor=false'}); google.load('jquery', '1.3.2'); google.setOnLoadCallback(function() { jQuery(document).ready(function($) { var latlng = new google.maps.LatLng(35.658632, 139.745411); var options = { zoom: 2, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map($('#mapCanvas').get(0), options); 略 }); }); これで普通にマップが表示されるのですが #mapCanvas { width: 100%; height: 300px; border: 1px solid #cecece; margin: 0; padding: 0;} このCSSでheightを100%にすると、マップが線のようになってしまいます。 横は自動でサイズ変更されるのですが、縦だけ300pxのように指定しないと画面が 見れません。 本家グーグルマップのように画面全体に表示したいのですが、どうすればよいので しょうか、どなたかご教示願います。
- ベストアンサー
- AJAX
- 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の作成
およびスタイルシートの活用 メモ帳にて 以下のソースコードにて試したのですがIEで右側しか表示されないで困ってます。多少いじってます。 このソースコードでmapを表示できるよう指摘をお願いします。 とても長いですが自力ではもう分からなくて手つかずです。 <!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"/> <title>１マップ</title> <style type="text/css"> <!-- h2 { text-align:left; font-size:25px } p { margin-top:0px; text-align:justify; text-justify:distribute; line-height:15pt; font-size:16px; color:black } .text1div { border-style:solid; border-width:4px; border-color:#ffffff; padding:3px; width:330px; height:325px; border:solid 0px; overflow:auto; background-color:white darkblue darkblue white; scrollbar-base-color: #ffffff; scrollbar-highlight-color:#009999; position:absolute; left:410px; top:70px } P.text1 { text-align:justify; text-justify:distribute; line-height:120%; font-size:15px } --> </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scr ipt> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(座標); var opts = { zoom: 13, center: latlng, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var marker = new google.maps.Marker({position: latlng,map: map }); var infowindow = new google.maps.InfoWindow({content:'＊＊＊＊＊',position: latlng }); infowindow.open(map); </script> </head> <body onload="initialize()"> <h2>My Maps</h2> <div id="map_canvas" style="width:400px; height:300px"></div> <DIV CLASS="text1div"><P CLASS="text1"> マップです。<BR> ＊＊市＊＊区＊条＊＊丁目＊番＊号<BR> Tel ＊＊＊-＊＊＊-＊＊＊<BR><BR> <DIV> <DIV align="center"> <form><input type="button" name="OK" value=" Close " onClick="window.close()"></form> </DIV> </body> </html>
- 締切済み
- CSS
お礼
ご回答ありがとうございます 作成していただいたソースでできました！ こんなかっこいいマーカーもあったんですね 大変勉強になりました 是非使用させていただきます！