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