无法让Google地图正常运行

时间：2016-12-17 15:46:57

标签： google-maps modx-revolution

早在2015年我的学校项目中，我发布了一个包含谷歌地图的网站。它包含多个标记和信息框，链接到网站内的页面。一切都很好。

我在一年前将该网站关闭了，现在我正在尝试将其恢复 - 但谷歌地图将无效。我使用MODX CMS。

如果我为它输入API密钥，它根本不显示，我收到一条控制台消息，指出无效的API密钥（虽然我知道它不是）。

如果我省略API密钥，它可以工作，但不能在Firefox中使用。

非常感谢任何建议。

代码如下：

<!DOCTYPE html>

-->

<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>[[++site_name]] - [[*pagetitle]]</title>
    <base href="[[++site_url]]" />

    <meta name="description" content="[[*description]]"/>
    <meta name="keywords" content="[[*introtext]]"/>

    <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
    <!-- viewport checks-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css" />

    <link rel="stylesheet" type="text/css" href="assets/css/style.css" />

        <link rel="stylesheet" type="text/css" href="assets/components/fontawesome/css/font-awesome.min.css" />

<!--adaptive images script-->

    <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

<!-- jQuery library (served from Google) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- bxSlider Javascript file -->

    <script src="assets/js/bxslider/jquery.bxslider.min.js"></script>

<!-- bxSlider CSS file -->

    <link href="assets/css/bxslider/jquery.bxslider.css" rel="stylesheet" />

    <script>$(document).ready(function(){
     $('.bxslider').bxSlider();
    });
    </script>

    <!--full screen script for home page-->

    <script src="assets/js/fullheight.js"></script>

    <!--navigation code-->

    <link rel="stylesheet" href="assets/js/menu/dist/slicknav.css">

    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

    <!--favicon-->

    <link rel="shortcut icon" href="assets/images/favicon.ico"/>

    <!--Google analytics script-->

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-59969111-2', 'auto');
  ga('send', 'pageview');

</script>




<!--GOOGLE MAP SCRIPT STARTS-->   

    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=API_KEY***MYKEY***"></script>


<script type="text/javascript"> 
function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(51.281668, 1.080447),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,


      // MAP CONTROLS (START)
      mapTypeControl: true,

      panControl: true,
      panControlOptions: {
      position: google.maps.ControlPosition.TOP_RIGHT
      },

      zoomControl: true,
      zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE,
      position: google.maps.ControlPosition.LEFT_TOP
      },

      streetViewControl: true,
      streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
      },
      // MAP CONTROLS (END)



    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    //MARKERS

    // -------------- MARKER 1
    var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(51.279481, 1.078085),
    map: map
    });


    // MARKER 1'S INFO WINDOW
    var infowindow1 = new google.maps.InfoWindow({
    content: 'Greyfriars Chapel<br />6 Stour St Canterbury<br /><br /><a href="[[~25]]">Learn more...</a>'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker1, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow1.open(map, marker1);
    });

    // -------- END OF 1st MARKER



    // -------------- MARKER 2
    var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(51.281974, 1.078254),
    map: map 
    });

    // MARKER 2'S INFO WINDOW
    var infowindow2 = new google.maps.InfoWindow({
    content: 'Blackfriars<br />Blackfriars Street and St Peters Lane, Canterbury <br /><a href="[[~26]]">Learn more...</a>'
    });
    // End of infowindow code

    // Adding a click event to the marker
    google.maps.event.addListener(marker2, 'click', function() {
    // Calling the open method of the infoWindow
    infowindow2.open(map, marker2);
    });

    // -------- END OF 2nd MARKER


  }
  google.maps.event.addDomListener(window, 'load', initialize);
  </script>



</script>

</head>

<!--HEAD ENDS BODY STARTS-->

<body>

    <div class="container">

    <!--HEADER INCLUDE CONTAINING NAV, LOGO, TITLE AND STRAPLINE-->

        <!--HEADER CONTAINING NAV, LOGO, TITLE AND STRAPLINE-->

        <header id="site">

            <div class="inner">

                <div id="logo-title-strapline">

                    <div id="logo-container">
                        <a href=[[~1]]><img src="assets/images/logo.png" alt="homepage link"></a>
                    </div><!--logo ends-->

                    <div id="title-strapline">
                        <h1><a href=[[~1]]>Home<span class="line-break"><br></span> Page</a></h1>
                        <p id="strapline">The strapline</p>
                    </div><!--title and strapline end-->

                </div><!--logo title and strapline end-->

                <nav>           
                    <ul id="menu">

                    </ul> 
                </nav>

            </div><!--inner site header ends-->
        </header>

        <!--PAGE BEGINS-->

        <!--PAGE HEADER-->

        <div id="page-header">
            <div class="inner">

                <h2>Buildings by<span class="line-break"><br></span>
                    <span class="heading-keyword">LOCATION</span>
                </h2>

            </div><!--inner page header ends-->
        </div><!--Page header ends-->


        <!--CONTENT TOPPER WITH PAGE INFO AND FUNCTIONLITY-->

        <div id="content-topper">
            <div class="inner">

                    <p id="breadcrumbs"><a href="[[~1]]"><i class="fa fa-home"></i> Home ></a> Buildings by Location</p>


            </div><!--inner content topper ends-->
        </div><!--content topper ends-->


        <div id="page-intro">
            <div class="inner">
                <p>View the historic buildings by location.<br> Click on a marker to view building details and go to its page.</p>
            </div>
        </div>

            <!--MAP-->

        <section id="map">
            <div class="inner">

                <div id="map-holder">

                     <div id="map-canvas">
                     </div><!--map canvas ends-->



                </div><!--map holder ends-->


            </div><!--inner map ends-->
        </section><!--map ends-->

        <!--SECTIONS END-->

        [[$footer]]

1 个答案:

答案 0 :(得分：0)

如果它说你的api密钥错了，那就接受它，你的api密钥错了。做下面的事情，假设您的密钥是1234567***，那么脚本src必须是：

<script src="https://maps.googleapis.com/maps/api/js?key=1234567***"></script>

相关问题
最新问题