使用经纬度代码脚本生成谷歌地图

Question

使用经纬度代码脚本生成谷歌地图

javascriptjquerygoogle-maps

4

我需要生成一个带有标记的谷歌地图。

我已经有了纬度和经度代码。

网上有很多脚本，但使用我已有的纬度和经度代码在我的网页上显示地图的最快方法是什么？

这是当前的代码： - 没有显示任何地图。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script>
    $(document).ready(function (){
         var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
         var myOptions = {
             zoom: 4,
             center: myLatlng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
             }
          map = new google.maps.Map($('#map'), myOptions);
          var marker = new google.maps.Marker({
              position: myLatlng, 
              map: map,
          title:"Fast marker"
         });
    }) 
    </script>

    </head>
    <body>

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

- Satch3000

$('#map') 不是 HTML 元素，而是 JQuery 元素数组，请使用 $('#map')[0]。fiddle - geocodezip

2个回答

2

代码正在向地图div添加一些不可见的内容。要查看它，我们需要添加CSS：

#map { width: 500px; height: 400px; }

- Sharad Sinha

这并没有提供问题的答案。如果要批评或请求作者澄清，请在他们的帖子下留言 - 您始终可以在自己的帖子上发表评论，并且一旦您拥有足够的声望，您将能够评论任何帖子。- 来自审查 - twernt

抱歉，我没有必要的50个声望来添加评论。不管怎样，我已经找到了解决方案。我们需要添加CSS #map { width: 500px; height: 400px; } - Sharad Sinha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jorge · Accepted Answer

标记语言

<script language=javascript src='http://maps.google.com/maps/api/js?sensor=false'></script>
<div id="map"></div>

Javascript

function initialize(){
     var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
     var myOptions = {
         zoom: 4,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
         }
      map = new google.maps.Map(document.getElementById("map"), myOptions);
      var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map,
      title:"Fast marker"
     });
} 

google.maps.event.addDomListener(window,'load', initialize);

Jquery

$(document).ready(function (){
     var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
     var myOptions = {
         zoom: 4,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
         }
      map = new google.maps.Map($('#map'), myOptions);
      var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map,
      title:"Fast marker"
     });
}