2017-01-10 5 views
0

Googleマップの場所にHTMLを書きました。異なる住所のGoogleマップの場所onclick

View on mapというボタンで2つの異なるアドレスを作成するので、ボタンをクリックすると、アドレスだけを使用してGoogleマップの場所を取得する別のページにリダイレクトされます。

しかし、結果ページにはGoogleマップの場所が1つだけ表示されます。スクリプトはどのアドレスでも動作していますが、onClickイベントで動作する必要があります。

http://happy1.studioscue.in/hello.html

(このページのリンクはあなた自身のボタンを備えた2つのアドレスが表示されます)...と他のリンクはあなたに結果が表示されます:ここでは

はリンクですGoogleの場所を表示するページ。オーストラリアのGoogleマップは1つしかありません。その理由は、オーストラリアのボディータグ&のページにそのページを使用しているからです。リンクは次のとおりです。上記のコメントで述べたよう@Devs

http://happy1.studioscue.in/google.html

+0

マップパラメータや座標をgoogle.html –

+0

に一度も渡していないので、どうすればいいのか教えてください。 – neha

+0

リンクはこの質問では死んでいます。外部リンクにこれは閉鎖する必要があることを意味します。可能な限り自己完結型で質問を行い、必要な終了と削除の量を制限してください。 – halfer

答えて

1

は、ページをgoogle.htmlするために、いくつかのマップパラメータ(地名や座標)を渡す必要があります。あなたが見ることができるようにgoogle.htmlリンクは今google.htmlページで使用される「Q」クエリ文字列パラメータを、持っている、

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Untitled Document</title> 
    </head> 

    <body> 
     <address> 
      Sector 75-Noid... 
     </address> 
     <a href="google.html?q=France"><button type="button">view on map</button></a> 

     <address>Delhi</address> 
     <a href="google.html?q=Delhi"><button type="button">view on map</button></a> 
    </body> 
</html> 

:私はにあなたのハローページを修正

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script> 
     <meta charset=utf-8 /> 
     <title>Welcome to JS Bin</title> 
     <meta name="viewport" content="width=device-width"> 
     <link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("address").each(function() {       
        var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent(getParameterByName('q')) +"&amp;output=embed'></iframe>"; 
        $(this).html(embed);  
       }); 

       function getParameterByName(name, url) { 
        if (!url) { 
         url = window.location.href; 
        } 
        name = name.replace(/[\[\]]/g, "\\$&"); 
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
        results = regex.exec(url); 
        if (!results) return null; 
        if (!results[2]) return ''; 
        return decodeURIComponent(results[2].replace(/\+/g, " ")); 
       } 
      }); 
     </script> 
    </head> 
    <body> 
     <address>Australia</address> 
    </body> 
</html> 

あなたはhere

+0

こんにちは、私はあなたのデモをチェックしましたが、最初のアドレスはセクター75-noidaですが、クリックするとフランスの地図の場所が表示されます。コードでは2つのアドレスのコードを書いていますが、そのコードをアンカータグに手動で書き込まなければなりませんか? &それは動的アドレスで動作しますか? – neha

関連する問題