Cant get Google map working

Question

Cant get Google map working

260 Views Asked by DesperatelySeeking At 10 April 2025 at 07:03

Back in 2015 for my School project I published a website with a Google map in it. It contained multiple markers and info boxes linking to pages within the site. It all worked fine.

I took the site down a year ago, and now am trying to get it back up - but the Google map will not work. I use the MODX CMS.

If I enter the API key for it, it doesn't show at all and I get a console message saying invalid API key (although I know it is not).

If I leave out the API key it works but not in Firefox.

Any advice much much appreciated.

Code is below:

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

Original Q&A

There are 1 best solutions below

**Yubaraj Shrestha** · Answer 1

If it says that your api key is wrong then accept it, that your api key is wrong. Do something like below, lets say your key is 1234567*** then script src must be:

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

Cant get Google map working

There are 1 best solutions below

Related Questions in GOOGLE-MAPS

Related Questions in MODX-REVOLUTION

Trending Questions

Popular # Hahtags

Popular Questions