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

时间:2022-02-18 08:24:10

I need to generate a google map with a marker.

我需要使用标记生成谷歌地图。

I have the latitude and longitude code.

我有纬度和经度代码。

There's lots of scripts around but what is the quickest way to display the map on my web page using the latitude and longitude codes that I have?

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

This is the current code: - No map is being displayed

这是当前代码: - 没有显示地图

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

2 个解决方案

#1


7  

Markup

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

#2


1  

The code is adding some invisible content to the map div. To view it, we need to add CSS:

代码是向map div添加一些不可见的内容。要查看它,我们需要添加CSS:

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

#1


7  

Markup

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

#2


1  

The code is adding some invisible content to the map div. To view it, we need to add CSS:

代码是向map div添加一些不可见的内容。要查看它,我们需要添加CSS:

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