クリック時にgoogle mapsをロード

-1

リンクをクリックした後、Googleマップを表示したい。クリック時にgoogle mapsをロード

私は以下を試しました。リンクは、その後、クリックされたとき：

挿入divリンク後のID map
ロードGoogleマップAPIとjQueryのメソッド$ .getScriptと
ID map

で divにGoogleマップを追加します。

残念ながら、ステップ2は機能していないようです。 JSコンソールで、私はグーグルを含めなぜカント私はライン

$.getScript("https://maps.googleapis.com/maps/api/js?key=mykey");

で文字列mykeyと私の実際のGoogle APIキーを交換したことを除いて、エラー

ReferenceError: google is not defined

これは、私のコードです見つけますこのようなMaps API？どのように含めることができますか？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script> 
    <script> 
    $(document).ready(function(){ 
     $('#showMap').click(function(e){ 
     e.preventDefault(); 

     $('#showMap').after("<div id='map' style='height: 200px;background-color:#08c;width: 200px;'></div>"); 

     $.getScript("https://maps.googleapis.com/maps/api/js?key=mykey"); 

     $lat = 10.1364; 
     $lng = -80.2514; 

     var myLatLng = {lat: $lat, lng: $lng}; 

      var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 11, 
      center: myLatLng 
      }); 

      var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map 
      }); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <a href='#' id="showMap">Hello</a> 
    </body> 
</html>

出典

2016-07-01 Adam

完全に正常です。 this fiddleをご覧ください。問題は、initスクリプトをすべて同期的に処理していたのに対し、getScriptは外部スクリプトの非同期呼び出しです。

$.getScriptの2番目の引数はコールバック関数をとります。

また、最初の場所に地図のdivを追加する必要はありません。

$('#show-map').click(() => { 
    $.getScript('https://maps.googleapis.com/maps/api/js',() => { 

    var myLatLng = { 
     lat: 10.1364, 
     lng: -80.2514 
    } 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 11, 
     center: myLatLng 
    }) 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map 
    }) 

    }) 
})

出典

2016-07-01 10:56:22

ありがとうございました！私はあなたの答えを6分で受け入れます。 – Adam

クリック時にgoogle mapsをロード

答えて

関連する問題