Javascript 单击按钮时在HTML页面中加载Google地图_Javascript_Html_Google Maps

Javascript 单击按钮时在HTML页面中加载Google地图

javascript html google-maps

Javascript 单击按钮时在HTML页面中加载Google地图,javascript,html,google-maps,Javascript,Html,Google Maps,我有一个HTML页面，其中有一个表示位置的按钮列表。当任何一个按钮被点击时，我希望一个谷歌地图出现在这个位置。地图应该在新的HTML页面上打开吗？（因为地图应该占满整页），还是可以在同一页上显示地图编辑-好的，我想在另一个HTML文件中打开它。我有一个外部JS文件，其中包含以下映射代码： function initialize(lat, lng) { var mapOptions = { center: {lat: parseFloat(lat), lng: par

我有一个HTML页面，其中有一个表示位置的按钮列表。当任何一个按钮被点击时，我希望一个谷歌地图出现在这个位置。地图应该在新的HTML页面上打开吗？（因为地图应该占满整页），还是可以在同一页上显示地图

编辑-好的，我想在另一个HTML文件中打开它。我有一个外部JS文件，其中包含以下映射代码：

function initialize(lat, lng) {

    var mapOptions = {

        center: {lat: parseFloat(lat), lng: parseFloat(lng)},
        zoom: 8,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));

我的外部HTML文件如下所示：

<html>
  <head>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="script.js" ></script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>


html，正文，#映射画布{高度：100%；边距：0；填充：0；}

但它不起作用。外部JS文件似乎找不到“映射画布”。谁能告诉我怎么解决这个问题吗？（script.js是外部js文件）

我解决了您的问题，尝试以下方法：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
  </head>
  <body>
    <div>
         <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.507724100000019"> Show Map1 </a>
    </div>
    <div>
        <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.607724100000019"> Show Map2 </a>
    </div>
    <div>
        <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.707724100000019" targe> Show Map3 </a>
    </div>
    <script>
        var render_map = function( lat, lng, title ) {

            var mapCanvas = document.getElementById('map-canvas');

            // options
            var args = {
                zoom        : 16,
                center      : new google.maps.LatLng(lat, lng),
                mapTypeId   : google.maps.MapTypeId.ROADMAP
            };

            // create map               
            var map = new google.maps.Map( mapCanvas, args);

            // create marker
            var marker = new google.maps.Marker({
              position: args.center,
              map: map,
              title: title
            });

            toggleMap();

        }

        var toggleMap = function(){
            if ($('body').hasClass('-show-map')) {
                mapHide();
            } else {
                mapShow();
            }; 
        }

        $('.map-trigger').on('click', function(event) {

            event.preventDefault(); 
            var lat = $(this).data('lat');
            var lng = $(this).data('lng');
            render_map(lat, lng);
        });
    </script>

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


#地图画布{
宽度：500px；
高度：400px；
}
var render_map=功能（纬度、液化天然气、标题）{
var mapCanvas=document.getElementById（'map-canvas'）；
//选择权
变量args={
缩放：16，
中心：新google.maps.LatLng（lat，lng），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//创建地图
var map=new google.maps.map（mapCanvas，args）；
//创建标记
var marker=new google.maps.marker({
位置：args.center，
地图：地图，
标题：标题
});
toggleMap（）；
}
var-toggleMap=function（）{
if（$（'body'）.hasClass（'-show-map'））{
mapHide（）；
}否则{
mapShow（）；
}; 
}
$（'.map trigger'）。在（'click'，函数（事件）{
event.preventDefault（）；
var lat=$（this.data（'lat'）；
var lng=$（此）.data（'lng'）；
渲染地图（纬度、液化天然气）；
});

两种方法都可以。