Googleマップを使用する方法javascript

私はページ上にGoogleマップを表示する方法についてのヘルプが必要です。私は開発者のGoogleコンソールからサンプルコードを使用して、私はそれらのキーを得るが、何も私はHTMLファイルをロードしたときに表示されていた。Googleマップを使用する方法javascript

JavaScriptコードは、HTMLコードが

<!DOCTYPE html> 
<html> 

    <head> 

    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #map { height: 100%; } 
    </style> 

<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script> 

</head> 

<body> 
    <div id="map"></div> 

    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7Zr0DZ906x5OH2ODTJZ-O2CxO00khPnI&libraries=visualization&callback=initMap"> 

    </script> 
    <script src="map.js"> </script> 
    </body> 
</html>

出典

2016-04-13 EmmY di-O

私はメモ帳でHTMLとJavaScriptコードを保存し、リモートローカルではないで実行しています。 –

Googleマップは、インターネットに接続して正常に動作していれば、ローカルサーバでは動作しません。 –

があなたのウェブページでGoogleマップを表示するには、次のコードを使用して、以下のようである

// Reference to the Firebase database. 
var firebase = new Firebase("http://firebaseio.com"); 

function initMap() { 
  var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 0, lng: 0}, 
    zoom: 3 
  }); 

  // Add marker on user click 
  map.addListener('click', function(e) { 
    firebase.push({lat: e.latLng.lat(), lng: e.latLng.lng()}); 
  }); 

  // Create a heatmap. 
  var heatmap = new google.maps.visualization.HeatmapLayer({ 
    data: [], 
    map: map, 
    radius: 8 
  }); 

  firebase.on("child_added", function(snapshot, prevChildKey) { 
    // Get latitude and longitude from Firebase. 
    var newPosition = snapshot.val(); 

    // Create a google.maps.LatLng object for the position of the marker. 
    // A LatLng object literal (as above) could be used, but the heatmap 
    // in the next step requires a google.maps.LatLng object. 
    var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng); 
    
    heatmap.getData().push(latLng); 
  }); 
}

以下の通りです。

<!DOCTYPE html> 
<html> 
<head> 
<script 
src="http://maps.googleapis.com/maps/api/js"> 
</script> 

<script> 
function initialize() { 
    var mapProp = { 
    center:new google.maps.LatLng(51.508742,-0.120850), 
    zoom:5, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
<div id="googleMap" style="width:500px;height:380px;"></div> 

</body> 
</html>

緯度と経度をLatLng（）で置き換えます。

出典

2016-04-13 02:13:20

この回答は地図を表示するのに役立ちました。ありがとう、しかし、してください、これは最後の1年間のプロジェクトです、私はデータベースにいくつかのクリックを取得する必要があります、いくつかのテキストやテキストフィールドを表示することも可能です。 –

ここでは、マップからlngとlatを保存して、表示ページからユーザーを選択したときに同じものを表示するための開発例を示します。

まず、足場とプロジェクトを作成し、その後は、Java /スクリプトを呼び出すためにdiv要素のidを使用してくださいあなたの_formファイルおよびshowファイルに次の行を追加します。ここ

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
    <script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>

とは、Javaスクリプトがあります

<script type="text/javascript"> 

    var map; 
     function initialize() { 
      var myLatlng = new google.maps.LatLng("<%= @person.latitude %>","<%= @person.longitude %>"); 
      var myOptions = { 
       zoom:7, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map"), myOptions); 
      // marker refers to a global variable 
      marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map 
      }); 
    } 

     window.onload = function() { initialize() }; 

    </script>

01：番組のページで、次の

<script type="text/javascript"> 

    var map; 
     function initialize() { 
      var myLatlng = new google.maps.LatLng(24.18061975930,79.36565089010); 
      var myOptions = { 
       zoom:7, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map"), myOptions); 
      // marker refers to a global variable 
      marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map 
      }); 

      google.maps.event.addListener(map, "click", function(event) { 
       // get lat/lon of click 
       var clickLat = event.latLng.lat(); 
       var clickLon = event.latLng.lng(); 

       // show in input box 
       document.getElementById("lat").value = clickLat.toFixed(5); 
       document.getElementById("lon").value = clickLon.toFixed(5); 

        var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(clickLat,clickLon), 
         map: map 
        }); 
      }); 
    } 

     window.onload = function() { initialize() }; 

    </script>

追加：lngとlat保存あなたのインデックスページの最後に

次の行を追加します。

<script> 
    markers = handler.addMarkers(<%=raw @hash.to_json %>); 
</script>

出典

2016-04-13 05:41:37 VK29

これがあなたに役立つなら、それをマークしてください：p – VK29

、第二の答えはjsonまたは何かにあるようです、私はJavaを試みることができる、いくつかのテキストとフォームを地図ページに表示したい。 j2ee 1.4で助けてください。どのように私はまた、マーカー –

で場所をトレースすることによってマップを反応させることができますあなたはマップを応答するhttps://www.ostraining.com/blog/coding/responsive-google-maps/のいくつかの例を持っている次のリンクを使用することができます – VK29

Googleマップを使用する方法javascript

答えて

関連する問題