如何使用谷歌地图javascript

how to make use of google map javascript

本文关键字：javascript 谷歌地图 何使用      更新时间：2024-05-19

我需要关于如何在页面上显示谷歌地图的帮助。我使用了来自开发人员谷歌控制台的示例代码，并从他们那里获得了一个密钥，但当我加载html文件时，什么都没有显示。

javascript代码如下

// 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);
  });
}

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>

使用以下代码在网页上显示谷歌地图。

<!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（）；

这里我举了一个我开发的例子，用于从地图中保存lng和lat，并在从视图页面中选择用户时显示它们。

首先，使用scaffold创建一个项目，然后在_form文件和show文件中添加以下内容。确保使用div id调用java/script:

    <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>

这里是存储lng和lat:的java脚本

    <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>

在显示页面中添加以下内容：

    <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>

最后在您的索引页面上添加以下内容：

<script>
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
</script>
相关文章：