I'm currently working on an IP tracking program, but I have some problems with the google maps function, I can't get the map to show or put a marker on the IP location. Can anyone point me in the right directions?
Here is the code I've used for the map, I took it from googles own website.
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src=";callback=initMap"
async defer></script>
Here's my plete code:
I'm currently working on an IP tracking program, but I have some problems with the google maps function, I can't get the map to show or put a marker on the IP location. Can anyone point me in the right directions?
Here is the code I've used for the map, I took it from googles own website.
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis./maps/api/js?key=AIzaSyAnoX8LSgSg5-pRiF5_IzZ313VsNZzuo-4&callback=initMap"
async defer></script>
Here's my plete code:
Share Improve this question edited Feb 6, 2019 at 8:06 Adam asked Feb 6, 2019 at 7:42 AdamAdam 471 silver badge5 bronze badges 1- 1 Please go read How to Ask and minimal reproducible example. Code relevant to your problem belongs directly into your question (in text form & properly formatted), not just on an external site. Please edit accordingly. – 04FS Commented Feb 6, 2019 at 8:01
3 Answers
Reset to default 11To show map you need to provide height.
Add this height in your style for div with id map
#map {
height: 300px;
}
Update:
if map container (with id map) should take up 100% of the height of the HTML body. Note that we must specifically declare those percentages for and as well.
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
In my case, div was like
<div id="map" style="height: 100%; width: 100%"></div>
but map appeared only when I've add position: absolute property explicitly. So, the result was
<div id="map" style="height: 100%; width: 100%; position: absolute"></div>
and it works.
You didn't added the api key
Google Maps JavaScript API warning: NoApiKeys https://developers.google./maps/documentation/javascript/error-messages#no-api-keys mw.m @ util.js:220 util.js:220 Google Maps JavaScript API warning: InvalidKey https://developers.google./maps/documentation/javascript/error-messages#invalid-key