How to setup gmaps.js in a basic html skeleton
Question
everyone
I have some trouble setting up gmaps in a little project.
Take note that the api keys aren't correctly entered.
I just copied one of their examples in their documentations.
<html>
<head>
<title>Test App</title>
<script src="js/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZWTTkguiQpNFtckx_x_x_x_xI&libraries=places"
async defer></script>
<!-- <script src="http://maps.google.com/maps/api/js"></script> -->
<script src="./js/gmaps.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/map.css">
<script type="text/javascript">
var map;
$(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
});
</script>
<style>
body {
font-family : 'Helvetica Neue','arial',sans-serif;
font-size : 15px;
}
#map {
height :100%;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-2x mb-2" style="font-size: 20px;">
Mapp
</h1>
<h3>How it works ?</h3>
<!-- insert map -->
<div id="map"></div>
</body>
</html>
When I try to open the google chrome developer tools I have an error that says:
Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js .
2 answers
solution1
1 2019-10-17 03:53:20
Issues:
- There is a typo in the posted HTML (missing the closing
</div>for the<div class="container">). - The CSS won't work for percentage sizing, it needs to define the size of the containing element (can be done by defining
html, body { height: 100%; }, see the related question: Responsive Google Maps v3 - Cannot get 100% height
code snippet:
var map; $(function() { map = new GMaps({ el: '#map', lat: -12.043333, lng: -77.028333, zoomControl: true, zoomControlOpt: { style: 'SMALL', position: 'TOP_LEFT' }, panControl: false, streetViewControl: false, mapTypeControl: false, overviewMapControl: false }); });
body { font-family: 'Helvetica Neue', 'arial', sans-serif; font-size: 15px; }.container { height: 70%; } html, body, #map { height: 100%; width: 100%; padding: 0px; margin: 0px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script src="https://cdn.jsdelivr.net/gh/hpneo/gmaps@master/gmaps.js"></script> <div class="container"> <h1 class="text-2x mb-2" style="font-size: 20px;"> Mapp </h1> <h3>How it works?</h3> <!-- insert map --> <div id="map"></div> </div>
solution2
0 2021-11-02 15:15:08
I belie that the example Google API KEY is restricted for his domain and we cannot us it. The code works when I swap the key for mine. Make sure the key has all the API's the gmaps.js is using enabled for your API KEY (I enabled all as just in case. Will update KEY permissions for deployment)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.