Why google map doesn't appear

Question

I am working with google map reverse geocode and my map doesn't show in my website. I copy my sample code and its working, and when i will paste it in my website file(with templates) its not showing

this is the code

<div id="map" style="width:50%;height:100%;"></div>

this is my script

       <script>
            function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: 16.0130425, lng: 120.35724399999998}
        });
        var geocoder = new google.maps.Geocoder;
        var infowindow = new google.maps.InfoWindow;

        document.getElementById('go').addEventListener('click', function() {
          geocodeLatLng(geocoder, map, infowindow);
        });
      }
      function geocodeLatLng(geocoder, map, infowindow) {
        var input = document.getElementById('latlng').value;
        var latlngStr = input.split(',', 2);
        var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {
              map.setZoom(17);
              var marker = new google.maps.Marker({
                position: latlng,
                map: map,
              });
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
      }
  </script>

I have my API in my header.php

but when i check in my "Inspect Element" the div map have a data that have in my sample code

Thankyou dude. You help me a lot. Can u explain why the percentage sign doesn't work in height? — Jonn Jhereco Pulido, Nov 19 '19 at 08:35
Duplicate of [Google Maps API map doesn't appear](https://stackoverflow.com/questions/3741150/google-maps-api-map-doesnt-appear) and dozens of other Q/A. — MrUpsidown, Nov 19 '19 at 09:07

score -1 · Answer 1 · answered Nov 19 '19 at 08:37

<div id="map" style="width:50%;height:100px;"></div>

Change to height to px or give height to parent or use cal

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

For more ref check

Why google map doesn't appear

1 Answers1