• 締切済み

GoogleMapのIEでのバグ

以下の状況に大変悩んでおります、ご教授いただけたら幸いです。 東京都のとある場所を中心としてマップを表示するHTMLページを tokyo.htmlとして作成し、親ページのparent.html内の<IFRAME>タグで tokyo.htmlを読み込んで表示しているのですが、 極々一部のPCのInternetExplorer(IE6.0以上)で中心がマップの左上隅になってしまう現象が発生しております。 OperaやFirefoxではこのようにはならず正常です。 IEでもこちらで所有するほとんどのPCからはバグは出ません。 また、tokyo.htmlを直接開いてもバグはでません。 IFRAMEで呼び出すと発生します。 バグが出るものと出ないものの設定やIEバージョンの差も 今のところ見当たりません。 これらはテストページなのでコードもかなり簡素で特別なことはしていないのですが。。 本チャンでは必ずIFRAMEを使用して表示しなくてはならないのでなんとかしたいのですが見当が付く方おりませんでしょうか? ちなみに<OBJECT>タグでの読み込みもテストしてみましたが同様の結果でした。 ■tokyo.html ------------------------------------------------------------------------ <!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" xml:lang="ja" lang="ja" dir="ltr"> <head> <script src="http://maps.google.co.jp/maps?file=api&hl=ja&v=2&key=xxxxxx" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function initLoad(){ var lat = '35.65863'; //緯度 var lng = '138.74541'; //経度 if(GBrowserIsCompatible()){ var map = new GMap2(document.getElementById("map")); var point = new GLatLng(lat,lng); map.setCenter(point, 10); map.addControl(new GSmallMapControl()); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.setMapType(G_HYBRID_TYPE); var marker = new GMarker(point); map.addOverlay(marker); } } //]]> </script> </head> <body onload="initLoad()" onunload="GUnload()"> <div id="map" style="width:500px; height:500px;"></div> </body> </html> ------------------------------------------------------------------------ ■ parent.html ------------------------------------------------------------------------ <html> <body> <table> <tr><td>test</td></tr> <tr><td> <iframe src="tokyo.html" height="500" width="500" frameborder="0"></iframe> </td></tr> </table> </body> </html> ------------------------------------------------------------------------

noname#79935
noname#79935

みんなの回答

回答No.3

僕も同じように、GoogleMap埋め込みでIE6だけずれて困っていました。 あれこれ試して、原因が判明しました。 それは何と、div id を map 以外にすることだったのです。 信じられない話ですが、これは再現性があります。 例えば、maps でも問題ありませんし、smapでも大丈夫です。 まさか、Microsoftさんが意図的にGoogleMap利用を阻止しようと、IEのソースに・・・等と疑ってしまいました。(という回答をマイクロソフトさんのサイトでしてていいのでしょうか。) 試してみてください。 (ずいぶん時間が経っているから、解決してるでしょうけれども。)

  • fire--
  • ベストアンサー率49% (146/293)
回答No.2

No.1です。 言葉が足りなかったようで、補足しておきます。 地図を表示するコンテナ自体はdivでもtable内でも問題ありません。 またjavascriptをincludeする部分もどこでも良いようです。 問題はGmap2などの実行をするjavascriptの部分で起きました。 なお、私のIE6環境ではiframe内でも、単独でも表示に違いは ありませんでした。

  • fire--
  • ベストアンサー率49% (146/293)
回答No.1

直接的な回答ではないので参考情報です。 当方もIEでは結構苦労しました。 こちらは実行スクリプトをbody内に置いていたのですが、 それがtableやdivタグの中にあると動かなかったり、 動いてもクリックした場所より、東のポイントが 拾われたりしました。 また、ここOKwaveの質問2872671でも、実行スクリプトの 部分をtableの外に出して解決しています。この方の例では 実行スクリプトがtableタグの中にあると、ニューヨークの地図が 全く表示されなかったのですが、場所を東京にしてやるとコンテナに たいして指定した地図が左上にずれた形で表示されました。

noname#79935
質問者

お礼

レスありがとうございます。 IEはGoogleMapに限らず苦労してます。。 tableやdiv内に置けなければ、表示位置を指定できませんね。。

関連するQ&A

  • GoogleMAPのIE8での印刷について

    goolgemapをAPIで設置しました なぜか、IE8で印刷プレビューをすると 1ページで収まるはずの印刷が、2ページになってしまい、 2ページ目にはgooglemapがはみ出しています CSSで設定したワイドサイズも無視して画面全体にgooglemapが広がった状態です DOCTYPE・・・ をはずせば大丈夫なようですが こちらをはずすとCSSが上手く動かくなってしまう為はずせません 何か解決策があれば教えてください 下記の通り、記述しました --------------------------------------------------------------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>APIテスト</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=http://maps.google.com/maps?file=api&amp;v=2&amp;key=APIキー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { //店舗の位置 var point = new GLatLng(35.681492,139.766071); //店舗を中心にマップ作成 var map = new GMap2(document.getElementById("gmap")); map.setCenter(point, 15); //店舗にマーク map.addOverlay(new GMarker(point)); //縮尺移動のコントロールを設置 map.addControl(new GSmallMapControl()); } } </script> </head> <body id="second" onload="load()" onunload="GUnload()"> <p style="height:700px; background:#CCCCCC;">余白</p> <div id="gmap" style="width:230px; height:380px;"> </div> </body> </html> ---------------------------------------------------------------------------

  • googleMapのマーカーがうまく表示されません

    googleMapを使って地図を表示させていますが、MarkerやopenInfoWindowといった関数の部分が上手く表示されません。具体的なスクリプトはこんな感じです。 <!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>Google Maps JavaScript API Example</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAREfirLNOQkMPltS0MtM_aRT2vOvOMLA6ksVZJNRPEoKnAz-wSxSLgFyYzSPMTRAqy1S4fTvUnXKX-g" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.689488, 139.691706), 20); map.addControl(new GLargeMapControl()); map.centerAndZoom(new GPoint(35.689488, 139.691706), 20); //マーカー var marker=new GMarker(new GPoint(35.689488, 139.691706)); map.addOverlay(marker);         //吹き出し var msg="ここです"; map.openInfoWindowHtml(map.getCenterLatLng(),msg); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 500px"></div>   <script type="text/javascript"> </body> </html> どなたかご教授くださると助かります。 宜しくお願いいたします。

  • 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の切り替えについて

    Javascriptのエラーについて質問させてください。 1つのページで、2種類のGoogleMAPを切り替えたいと思っています。しかし、以下のように記述したところ「"offsetwidth"はnullまたはオブジェクトではありません。」とエラー表示されてしまいます(確認ブラウザ:IE6、FireFOX3、Safari、Googlechorome)。 一体、何がマズイのかさっぱりわからなくなり、困り果てて質問しています。どうかお力をお貸しください。 宜しくお願いします。 <!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"> <link rel="stylesheet" href="style_sheet.css" type="text/css"> <title>マップテスト</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=グーグルマップAPIキー" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //エリア1マップ用設定開始。 var map = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map.addControl( new GSmallMapControl() ); map.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point1 = new GLatLng(座標,座標); map.setCenter(point1, 10); var point2 = new GLatLng(座標,座標); map.setCenter(point2, 10); var point3 = new GLatLng(座標,座標); map.setCenter(point3, 10); //アイコンのための宣言 var icon = new GIcon(); // アイコン画像のURL icon.image = "./img/hoge.png"; // アイコン画像のサイズ icon.iconSize = new GSize(50, 25); // アイコンの表示場所 con.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map.addOverlay( new GMarker(point1, icon) ); map.addOverlay( new GMarker(point2, icon) ); map.addOverlay( new GMarker(point3, icon) ); //デフォルトの表示 map.setCenter(new GLatLng(座標,座標), 10); } } function load2() { if (GBrowserIsCompatible()) { //エリア2マップ用設定開始。 var map2 = new GMap2(document.getElementById("map")); //コントロール追加表示。右下縮小図とコントロールバー。 map2.addControl( new GSmallMapControl() ); map2.addControl( new GOverviewMapControl() ); //店舗のマーカー表示 var point21 = new GLatLng(座標,座標); map2.setCenter(point21, 10); var point22 = new GLatLng(座標,座標); map2.setCenter(point22, 10); var point23 = new GLatLng(座標,座標); map2.setCenter(point23, 10); var point24 = new GLatLng(座標,座標); map2.setCenter(point24, 10); //アイコンのための宣言 var icon2 = new GIcon(); // アイコン画像のURL icon2.image = "./img/hoge2.png"; // アイコン画像のサイズ(横幅/縦幅) icon2.iconSize = new GSize(50, 25); // アイコンの表示場所 icon2.iconAnchor = new GLatLng(32, 0); // マーカーの表示 map2.addOverlay( new GMarker(point21, icon2) ); map2.addOverlay( new GMarker(point22, icon2) ); map2.addOverlay( new GMarker(point23, icon2) ); map2.addOverlay( new GMarker(point24, icon2) ); //デフォルトの表示 map2.setCenter(new GLatLng(座標,座標); 12); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <a href="#" onclick="load()">エリア1</a>| <a href="#" onclick="load2()">エリア2</a>| <!-- マップ表示用DIV --> <div id="map" style="width:700px;height:350px;"></div> </body> </html>

  • javascriptでgooglemapを表示させたいのですが、fir

    javascriptでgooglemapを表示させたいのですが、firefoxで表示できず、空白になってしまいます。 IEでは問題なく表示できています。何が問題でしょうか。 html部分です。 <!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" id="sixapart-standard"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxxxxx" type="text/javascript"></script> <script type="text/javascript" src="http://xxxxx.xxx/test.js"></script> </head> <body> <div id="map" style="width: 450px; height: 300px"></div> </body> </html> test.js部分です。 window.onload = function() { var map = null; var geocoder = null; if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.67431, 139.69082), 13); // GClientGeocoderを初期化 geocoder = new GClientGeocoder(); } if (geocoder) { geocoder.getLatLng( "東京都xx区xx", function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml("ここが目的地です。"); } } ); } }

  • GoogleMapを複数表示させたい

    GoogleMap を API で2つ表示させて、それぞれの地図にマーカーをひとつずつつけたいです。 マーカーをつけて吹き出すをだすまではできたのですが、 マップをもうひとつ増やすにはどのように記述すればよいでしょうか? 現在のソースは以下です -------------------------------------------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> #Gmap{ width:500px; height:500px; } </style> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=http://maps.google.com/maps?file=api&amp;v=2&amp;key=" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { //地図を作成 var map = new GMap2(document.getElementById("Gmap")); map.setCenter(new GLatLng(35.675845,139.744763), 15); //マーカーを作成 var marker = new GMarker(new GLatLng(35.675845,139.744763)); //マーカーをクリックしたら、吹き出しの中に写真を表示する GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("テキストが入ります"); }); //マーカーを地図上に配置 map.addOverlay(marker); //縮尺移動のコントロールを設置 map.addControl(new GLargeMapControl()); //地図衛星写真 切り替えボタンを表示 map.addControl(new GMapTypeControl()); //縮尺表示 map.addControl(new GScaleControl()); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="Gmap"></div> </body> </html> -------------------------------------------------------- よろしくお願いいたします

  • Google Mapsがテーブルタグの中で使えません(IEのみ)

    IE6、IE7でGoogle Mapsから取得した地図データをテーブルタグの中で表示しようとすると、地図がグレーになり表示することができません。 同じコードでもFirefox2は正常に表示できます。 表示場所(下記のコードの<div id="map">)をテーブルタグの外に移すとIEでも正常に地図を表示できています。 何かお分かりになる方がいらっしゃいましたら、アドバイスをお願いできないでしょうか。 コードは以下の通りです。 <!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>Google Maps Example</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> <div id="map" style="width:350px; height:300px;"></div> <script src="http://maps.google.com/maps?file=api&v=2&key=[キー値]" type="text/javascript" charset="utf-8"></script> <table style="width: 600px;"> <tr> <td> <script type="text/javascript"> //<![CDATA[ var map = new GMap2(document.getElementById("map")); var geocoder = new GClientGeocoder(); geocoder.getLatLng('new york', function(point) {map.setCenter(point, 13);}); //]]> </script> </td> </tr> </table> </body> </html> OSはWindowsXP(SP2)です。 よろしくお願いいたします。

  • googlemap v3 のDTD宣言について

    お世話になります。 googleAPI のリファレンスから googlemap v3 のソースを Dreamweavrにコピペしてブラウザで表示できます。 これをDWで「XHTMLに変換」するとまったく表示されません。 どうしたらいいのでしょうか? 1行目のコードが変わるだけなのですが、表示されないのはなぜですか? 他のさくらエディタなどにコピペしても同じ結果です。 サイトはXHTMLで記述しているので統一したいのですが・・・ 地図だけをiframeに入れて、という逃げ方もありますが納得できないのです。 ご存知の方がおられましたら教えてください。 よろしくお願いします。 <html> ↓↓↓ <!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> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

    • ベストアンサー
    • AJAX
  • 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&amp;v=2&amp;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
  • googleMapで情報ウィンドウの表示が崩れる

    お世話になります。 DBに登録したマーカーデータを取り出して グーグルマップに表示するツールを作ったのですが、 マーカーをクリックしてインフォメーションウィンドウを表示すると 「吹き出し」の形が切れ目が入ったように崩れてしまいます。 またそこには取り出したデータを表示もするのですが、 ドラッグして反転させないと見えない状態です。(単に文字色が白?) 以下がプログラムの内容になりますが、何かわかることがありましたらご指摘願えないでしょうか? よろしくお願い致します。 var map function startUp(){ map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.618, 139.7672), 10); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()); map.enableDoubleClickZoom(); GDownloadUrl("load.php", function(doc, stat){ eval("load=" + doc); for(var i=0; i<load.data.length; i++){ var mk = makeMarker(load.data[i].lat, load.data[i].lng, load.data[i].name); map.addOverlay(mk); } }); } function makeMarker(lat, lng, name){ var point = new GLatLng(lat,lng); var marker = new GMarker(point); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml("緯度:" + lat + "<br>経度:" + lng + "<br>施設名:" + name); }); return marker; } 本当はわざわざ関数化することなく下のようにやりたいのですがエラーになるので上のようにしています。 var mk = new GMarker(new GLatLng(load.data[i].lat, load.data[i].lng)); map.addOverlay(mk);