Googleマップのマーカーは私のウェブサイトで

まで表示されません。誰かが私を助けることができる私は、GoogleのドキュメントによるとjavascriptのGoogleマップのマーカーは私のウェブサイトで

<script type="text/javascript"> 
     var myOptions = { 
      zoom: 16, 
      center: new google.maps.LatLng(31.6321288,-8.0099319,787), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var myLatLng = new google.maps.LatLng(31.6321288,-8.0099319,787); 
     var beachMarker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: "We Are Here" 
     }); 
    </script>

出典

2016-06-22 Mourad Blil

ます。 APIキーを追加しましたが、まだ動作しません。 –

を理解しないでください次のように、それがあります。あなたはGoogleマッププロジェクトを作成する必要があり、APIキーを生成 - YOUR_API_KEY

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Simple markers</title> 
 
    <style> 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <script> 
 

 
     function initMap() { 
 
     var myLatLng = {lat: -25.363, lng: 131.044}; 
 

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

 
     var marker = new google.maps.Marker({ 
 
      position: myLatLng, 
 
      map: map, 
 
      title: 'Hello World!' 
 
     }); 
 
     } 
 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

出典

2016-06-22 01:33:03

うまくいかなかった、私はそれを試した。 –

こんにちは私は自分のローカルマシンでテストしましたが、それはうまく動作します。 1. https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend&keyType=CLIENT_SIDE&reusekey=trueからGoogle Map APIキーからapiキーを取得する必要があります。 2.次に、htmlファイルのルートディレクトリで 'python -m SimpleHTTPServer'を実行してhttpサーバを起動し、localhost：8000に移動してhtmlを確認します。まだ動作しない場合は、javascriptコンソールのエラー –

1交換してくださいGoogle Map API Keyをあなたのhtmlタグでこの行が含まれていることを確認して、取得（）。それは非常に簡単で速いです。

2 - だから、あなたはあなたのAPIキーをYOUR_API_KEYを変え、GoogleMapsAPIをインポートする必要があります。

<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
</script>

結果はこのようなものです：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <title>Simple markers</title> 
     <style> 
      html, body { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      #map { 
       height: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="map"></div> 
     <script> 
      function initMap() { 
       var myLatLng = {lat:31.6321288, lng:-8.0099319}; 

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

       var marker = new google.maps.Marker({ 
        position: myLatLng, 
        map: map, 
        title: 'Hello World!' 
       }); 
      } 
     </script> 
     <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
     </script> 
    </body> 
</html>

出典

2016-06-22 01:34:56

をコピーして貼り付けてください。動作しませんでした。試しました。 –

Googleマップのマーカーは私のウェブサイトで

答えて

関連する問題