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:

• javascript
• css
• html
• google-maps

Share Improve this question Follow edited Feb 6, 2019 at 8:06 Adam asked Feb 6, 2019 at 7:42 AdamAdam 4711 silver badge55 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

To 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