Google Maps API JavaScript - no display, no errors

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> [email protected]</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>

What sets the size of the map? Without appropriate CSS, it won't have a size. Can't see much on a zero size map. — geocodezip
– geocodezip, Commented Mar 29, 2018 at 3:09
I have my CSS in place. I'll update my original post to reflect that. Thanks. — tommycopeland
– tommycopeland, Commented Mar 29, 2018 at 11:04
Are you calling initMap somewhere? The posted code works for me (fiddle) if I call initMap on page load. — geocodezip
– geocodezip, Commented Mar 29, 2018 at 21:32

Hitesh Kansagara · Accepted Answer · 2018-03-29 03:17:06Z

1

add style in html

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

it will display map

answered Mar 29, 2018 at 3:17

Hitesh Kansagara

3,6063 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tommycopeland Over a year ago

It's tagged in my style.css sheet. Does it actually need to be placed as inline HTML code? I wouldn't think so...

Hitesh Kansagara Over a year ago

If style is written in style.css then need to check that other style is not overwritten it otherwise make it important in style.css then no need to place inline html

Jay · Accepted Answer · 2018-03-29 03:23:09Z

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>

Hi James, thanks, but I don't see how your code is substantially different from mine. Would you mind describing the difference?

xomena · Accepted Answer · 2018-03-30 14:27:07Z

0

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!

answered Mar 30, 2018 at 14:27

xomena

32.3k6 gold badges97 silver badges125 bronze badges

1 Comment

tommycopeland Over a year ago

The extension app is great! Thank you for that!

tommycopeland · Accepted Answer · 2018-04-03 17:45:20Z

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> [email protected]</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.

Collectives™ on Stack Overflow

Google Maps API JavaScript - no display, no errors

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related