0

I have reached exhaustion on a bug with my Google map.

The map populates fine on my version of Chrome, but doesn't on anyone else's or any other browsers.

It doesn't produce any indications of a struggle in the console. The codes imply doesn't populate the div with an id=map.

I will attach some screenshots of the results, my code, and the console.

  • I have used my own API key, where it is expressed in the code...

The code:

<div id="map"></div>
<script>
    var map;
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 43.627489, lng: -79.662732},
            zoom: 11
        });

        var request = {
            placeId: 'ChIJ-2h986dAK4gRlDAADdqtUDo',
            fields: ['name', 'formatted_address', 'place_id', 'geometry']
        };

        var infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);

        service.getDetails(request, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: place.geometry.location
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + place.formatted_address + '</div>');
                    infowindow.open(map, this);
                });
            }
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEYGOESHERE&libraries=places&callback=initMap"></script>

The consoles:

enter image description here

enter image description here

enter image description here

The results:

Working... enter image description here

Not working... enter image description here

Please help me discover why this is only working on very specific versions of Chrome and none of the others.

Jason Is My Name
  • 929
  • 2
  • 14
  • 38
  • are you using any CORS related plugin for chrome ? – Shiv Kumar Baghel Sep 24 '19 at 09:35
  • Can you help me find that out? – Jason Is My Name Sep 24 '19 at 09:38
  • 2
    When I add a valid key to your code it works fine (https://jsfiddle.net/cvju0z5t/). Are you giving the `#map` element a height in your CSS? It will not display without explicit dimensions. – Turnip Sep 24 '19 at 09:45
  • You can publish your API key wherever you like, if it is properly restricted. No need to hide it, and anyway it can be seen in the source of any website using it. – MrUpsidown Sep 24 '19 at 09:45
  • 1
    You have **not** provided a [mcve] so there is no way for anyone to reproduce the issue. – MrUpsidown Sep 24 '19 at 09:46
  • @MrUpsidown this is a minimal example, I can't reduce it further it won't work! Please let me know how you would like it doctoring and I will happily update – Jason Is My Name Sep 24 '19 at 09:51
  • @Turnip - Thanks so much for your suggestion! If you would like please place the css as an answer and I can upvote and select the correct answer. Please upvote my question if you enjoyed contributing! – Jason Is My Name Sep 24 '19 at 09:56
  • Also https://stackoverflow.com/questions/7668549/google-map-does-not-appear – Turnip Sep 24 '19 at 10:05
  • @Turnip - It clearly is a duplicate but my example worked on Chrome but not other browsers. That lead me to think it was a different issue. Not sure what to do now I am aware it is a duplicate? – Jason Is My Name Sep 24 '19 at 10:11
  • If other users agree with my duplicate suggestions your question will eventually be closed as a duplicate. You don't need to do anything. – Turnip Sep 24 '19 at 10:14
  • Brilliant, all the best, thanks for your help, Jason. – Jason Is My Name Sep 24 '19 at 11:32
  • @JasonIsMyName what I meant was that, as I could not see any CSS in your snippet, I thought it was incomplete. If you do **not** have any CSS applied, then you are obviously missing the HTML map container height. – MrUpsidown Sep 24 '19 at 12:23
  • @MrUpsidown - It was exactly that. Sorry for the confusion. Hopefully we see eye to eye now. – Jason Is My Name Sep 24 '19 at 12:51

0 Answers0