Google Maps API JavaScript-无显示，无错误

Question

I could use some guidance. I have built a map using Google Maps Javascript API, and I receive no errors on load - but the map isn't displaying. The DOM element is active; the javascript file loads; html and css styling are all in place. API key is active, and restricted to my domain. So I'm really just not sure what I'm doing wrong. You can see a live demo of this issue by going to https://www.copelandcompany.com/visit-us/ , and scrolling just below the fold. That white space should be the map.

While there are no errors now, what DOES throw errors is when I add "async defer" to the Google Maps javascript, or when I add "callback:initMap" to the API url. So I removed those things, and there's no scripting errors.

But - no map.

Here's my code. Any help is appreciated, thanks!

Loaded at the bottom of the header:

<script src="https://www.copelandcompany.com/wp-content/themes/pinnacle_child/cco-map.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YESILOADEDMYAPIKEYHERE"></script>

Here's my cco-map.js file code:

// Google Maps Code
function initMap () {
  var cco_office = {lat: 26.687469, lng: -80.054225};
  var cco_map = new google.maps.Map(document.getElementById('cco-map'), {
    zoom: 15,
    center: cco_office
  });

  var contentString = 
      '<div id="cco-marker">'+
      '<img src="/wp-content/uploads/2015/04/DSC_0195.jpg" />'+
      '<h3 style="font-family: Raleway;">Copeland & Co. Real Estate</h3>'+
      '<div id="bodyContent">'+
      '<b>Address:</b> 2822B S Dixie Hwy, West Palm Beach, FL 33405' +
      '<p><b>Phone:</b> 561-500-LIST (5478)<br>'+
      '<b>Email:</b> hello@cpld.co</br>'+
      '<b>Hours:</b> Monday-Friday, 9:00 a.m. to 5:00 p.m.<br>'+
      '<div class="links"><a href="https://www.google.com/maps/dir//Copeland+%26+Co.+Real+Estate,+2822+S+Dixie+Hwy,+West+Palm+Beach,+FL+33405/@26.687469,-80.054225,15z/data=!4m8!4m7!1m0!1m5!1m1!1s0x88d8d7aa6a149623:0xde07abb7d8b409f4!2m2!1d-80.054225!2d26.687469" target="_blank" title="Directions" />Get Directions</a> | <a href="https://www.google.com/maps/place/Copeland+%26+Co.+Real+Estate/@26.6874738,-80.0564137,17z/data=!4m7!3m6!1s0x0:0xde07abb7d8b409f4!8m2!3d26.687469!4d-80.054225!9m1!1b1" target="_blank" title="Reviews" style="color: #EB6E00;" />Read Our 5-Star Reviews</a></div>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var cco_marker = new google.maps.Marker({
    position: cco_office,
    map: cco_map,
    title: 'Copeland & Co. Real Estate'
  });
  cco_marker.addListener('click', function() {
    InfoWindow.open(cco_map, cco_marker);
  });
}

Loaded by style.css:

#cco-map {
    width: 100%;
    height: 400px;
}

And my HTML:

<div id="cco-map"></div>

Answer 1

add style in html

<style>
 #cco-map{
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

it will display map

Answer 2

I ever used google map in my project.. I hope this can help you

<div id="map"></div>

<div>
   <input id="lat" type="text" size="30" class="form-control" name="Latitude" />
   <input id="lng" type="text" size="30" class="form-control" name="Longitude" />
</div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCiH9aX_KI44VpanKHYDE28s-4jTv9B8EM&sensor=true"></script>

<script type="text/javascript">
    function loadmap() {
        var medan = new google.maps.LatLng(3.58727, 98.67491);
        var marker;
        var map;

        var mapOptions = {
            zoom : 13,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            center : medan
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        marker = new google.maps.Marker({
            map : map,
            draggable : true,
            animation : google.maps.Animation.DROP,
            position : medan
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
        google.maps.event.addListener(marker, 'dragend', function() {
            var markerlocation = marker.getPosition();
            $('#lat').val(markerlocation.lat().toString());
            $('#lng').val(markerlocation.lng().toString());
        });
    }

    function toggleBounce() {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    loadmap();
</script>

Answer 3

To troubleshoot your issue I would suggest installing the Google Maps API Checker extension for Chrome browser:

https://chrome.google.com/webstore/detail/google-maps-api-checker/mlikepnkghhlnkgeejmlkfeheihlehne

Open your page https://www.copelandcompany.com/visit-us/ and check what says the Google Maps API checker

As you can see you try to load Maps JavaScript API twice on the same page. Even more, the first URL

https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=AIzaSyBN...

loads the release version of the API, while the second URL

https://maps.googleapis.com/maps/api/js?key=AIzaSyCBe8iI....&callback=initMap

loads experimental version of the API. You mix release and experimental version on the same page and use different API keys in both calls. I don't think this mix of versions might work correctly.

Now check the browser console, you say there is no errors, but I can see two of them

You have to load Google Maps JavaScript API only once, have a look at versioning document

https://developers.google.com/maps/documentation/javascript/versions

I hope this helps!

Answer 4

I fixed the issue. This was unbeknownst to me, but apparently you have to insert the div tag and the API call together, like back-to-back, in the HTML. The issue was that I was loading the API call and my coo-map.js file in the header, instead of loading the API call with the map div.

Here's how it should be, for anyone who has the same misunderstanding I had:

IN THE HEADER:

<script src="https://www.copelandcompany.com/wp-content/themes/pinnacle_child/cco-map.js"></script>

IN THE HTML:

<div id="cco-map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY?callback=initMap"></script>

IN THE CSS:

<style>
 #cco-map{
   width: 100%;
   height: 400px; */THIS REQUIRES A DESIGNATED HEIGHT TO LOAD/*
   background-color: grey;
 }
</style>

AND, IN A .JS FILE:

// Google Maps Code
function initMap () {
  var cco_office = {lat: 26.687469, lng: -80.054225};
  var cco_map = new google.maps.Map(document.getElementById('cco-map'), {
    zoom: 15,
    center: cco_office
  });

  var contentString = 
      '<div id="cco-marker">'+
      '<img src="/wp-content/uploads/2015/04/DSC_0195.jpg" />'+
      '<h3 style="font-family: Raleway;">Copeland & Co. Real Estate</h3>'+
      '<div id="bodyContent">'+
      '<b>Address:</b> 2822B S Dixie Hwy, West Palm Beach, FL 33405' +
      '<p><b>Phone:</b> 561-500-LIST (5478)<br>'+
      '<b>Email:</b> hello@cpld.co</br>'+
      '<b>Hours:</b> Monday-Friday, 9:00 a.m. to 5:00 p.m.<br>'+
      '<div class="links"><a href="https://www.google.com/maps/dir//Copeland+%26+Co.+Real+Estate,+2822+S+Dixie+Hwy,+West+Palm+Beach,+FL+33405/@26.687469,-80.054225,15z/data=!4m8!4m7!1m0!1m5!1m1!1s0x88d8d7aa6a149623:0xde07abb7d8b409f4!2m2!1d-80.054225!2d26.687469" target="_blank" title="Directions" />Get Directions</a> | <a href="https://www.google.com/maps/place/Copeland+%26+Co.+Real+Estate/@26.6874738,-80.0564137,17z/data=!4m7!3m6!1s0x0:0xde07abb7d8b409f4!8m2!3d26.687469!4d-80.054225!9m1!1b1" target="_blank" title="Reviews" style="color: #EB6E00;" />Read Our 5-Star Reviews</a></div>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var cco_marker = new google.maps.Marker({
    position: cco_office,
    map: cco_map,
    title: 'Copeland & Co. Real Estate'
  });
  cco_marker.addListener('click', function() {
    InfoWindow.open(cco_map, cco_marker);
  });
}

All good. Thanks everyone.