SsupremvanamApr 3, 2017
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
Map is not supported
7 replies · opened Apr 3, 2017
SsupremvanamApr 3, 2017
This is the screenshot
SSemicolon WebSTAFFApr 5, 2017
Hello,
You will need to use the Google Maps API Key for the Maps to work properly. Please find the following code:
https://maps.google.com/maps/api/js?key=YOUR_API_KEYYou can generate your API Key (Browser Key) for Google Maps from here: https://developers.google.com/maps/documentation/javascript/ and then Click on Get a Key in the Header. Make sure you replace YOUR_API_KEY with you Generated API Key.
This will definitely fix your issue. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Sskelstar1Apr 12, 2017
I have the same problem... got the API key... applied it... followed your instructions to a tee... still no map.
HELP.
MMychaelApr 12, 2017
Did you place the key in the <script>?
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=your_key_here"></script>
Sskelstar1Apr 12, 2017
Yes, absolutely.
You can look here: http://www.sanilaccountymuseum.org/$test/directions.php
MMychaelApr 12, 2017
Move the scripts to your footer and it should work. I took your source code and rearranged it and it worked for me.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<!-- Document Title
============================================= -->
<title>Map and Driving Directions</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Sanilac County Historic Village & Museum" />
<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/swiper.css" type="text/css" />
<link rel="stylesheet" href="css/dark.css" type="text/css" />
<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" />
<link rel="stylesheet" href="css/colors.css" type="text/css" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38017318-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link rel="stylesheet" href="ajximagerotator.css" type="text/css" />
<script src="ajximagerotator.js" type="text/javascript"></script>
<style>
#content p {font-size:18px;}
table.center {margin-left:auto;margin-right:auto;}
</style>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Header
============================================= -->
<header id="header" class="full-header">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
[
](index.php)
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">
<li class="current">[HomeYou Found Us](index.php)-
</nav><!-- #primary-menu end --> </div> </div> </header><!-- #header end --> <!-- Content ============================================= --> <section id="content"> <div class="content-wrap"> <div class="section header-stick"> <div class="container clearfix"> <div class="row"> <div class="col-md-12"> <h1>Map and Driving Directions</h1>
<h3>228 S. Ridge Street Port Sanilac, Michigan 48469 810-622-9946</h3>
<h3>Note: Ridge Street Is M-25 On This Map.</h3>
<div id="google-map1" style="height: 250px;" class="gmap"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="dark">
<div class="container">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap clearfix">
<div class="col_one_third">
<div class="widget clearfix">
<div>
<address>
**Historic Village & Museum:**<br>
228 S. Ridge Street<br>
Port Sanilac, Michigan 48469<br>
</address>
<abbr title="Phone Number">**Phone:**</abbr> (810)-622-9946<br>
<abbr title="Email Address">**Email:**</abbr> sanilacmuseum at gmail.com
</div>
</div>
</div>
<div class="col_one_third">
<div class="widget clearfix">
<h4 style="text-align:center;">Upcoming Events</h4>
<div id="oc-portfolio-sidebar" class="owl-carousel carousel-widget" data-items="1" data-margin="10" data-loop="true" data-nav="false" data-autoplay="5000">
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-desc center nobottompadding">
<h3>[Thumb Regional Historical Consortium](calendar.php)</h3>
<span>[May, 4](#)</span>
</div>
</div>
</div>
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-desc center nobottompadding">
<h3>[Volunteer Day](calendar.php)</h3>
<span>[June, 3](#)</span>
</div>
</div>
</div>
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-desc center nobottompadding">
<h3>[Voyageurs and Settlers Days](calendar.php)</h3>
<span>[June, 10 & 11](#)</span>
</div>
</div>
</div>
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-desc center nobottompadding">
<h3>[Children's Days at the Museum 1-3 pm](calendar.php)</h3>
<span>[June, 14, 21, 28](#)</span>
</div>
</div>
</div>
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-desc center nobottompadding">
<h3>[Singin' the Sixties Music Fest](calendar.php)</h3>
<span>[July, 22](#)</span>
</div>
</div>
</div>
<div class="oc-item">
<div class="iportfolio">
<div class="portfolio-desc center nobottompadding">
<h3>[Party for Preservation](calendar.php)</h3>
<span>[July 23](#)</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col_one_third col_last">
<div class="widget subscribe-widget clearfix">
<h5>**Subscribe** to Our Newsletter to get Important News, Amazing Offers & Inside Scoops: [Subscribe](newsletter.php)</h5>
</div>
<div class="widget clearfix" style="margin-bottom: -20px;">
<div class="row">
<div class="col-md-6 clearfix bottommargin-sm">
[
](#)
[Like us
on Facebook](https://www.facebook.com/Sanilac-County-Historic-Village-Museum-124295187620988/)
</div>
</div>
</div>
</div>
</div><!-- .footer-widgets-wrap end -->
</div>
<!-- Copyrights
============================================= -->
<div id="copyrights">
<div class="container clearfix">
<div class="col_half">
Sanilac County Historic Village & Museum © 2013 - All rights reserved.<br>
The museum is responsible for the content of this site.<br>
<div class="copyright-links">[Terms of Use](terms.php) / [Privacy Policy](privacy.php)</div>
</div>
<div class="col_half col_last tright">
<div class="fright clearfix">
[
](https://www.facebook.com/Sanilac-County-Historic-Village-Museum-124295187620988/)
[
](https://twitter.com/HistoricSanilac)
[
](https://www.youtube.com/user/HistoricalSanilac/)
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div><!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCFjUcnakAPOlpem6tU3bvoxLzgVpbpkCI"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>
<script type="text/javascript">
$('#google-map1').gMap({
address: 'Port Sanilac, Michigan',
maptype: 'ROADMAP',
zoom: 14,
markers: [
{
address: "Port Sanilac, Michigan"
}
],
doubleclickzoom: false,
controls: {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
}
});</script>
</body>
</html>
SSemicolon WebSTAFFApr 12, 2017
Hello,
Yes Absolutely! As @davidcladd (Mychael) suggested, moving the Google Maps JS Code to the bottom of the Page after the js/functions.js JS File Linking, will definitely fix your issue!
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard