0

I have a page to display Google Map output with a set (40+) custom markers set on the page, (this is a redevelopment of an existing system (but poorly coded).

My issue is that the map does not output, there is no content inside the <div id='map'>. There are no errors on browser consoles so am at a bit of a loss as to how to approach this issue.

I have commented out various parts of my code (such as marker placement) but this also does not seem to fix it.

Page code:

<!DOCTYPE html>
<head>

<script type="text/javascript">
         function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 11,
         /*     mapTypeId: google.maps.MapTypeId.ROADMAP,*/
                center: {lat: 52.345617, lng: 1.502666}
            });

         /**   setMarkers(map);**/

        /***
            infowindow = new google.maps.InfoWindow({
                content: "holding..."
            });**/
        }

      /*** map still loads blank even when commenting all the below JS **/
      /***
        var places = [
            // Name | lat | long | order | infoWindowDescr
            ['Dud Data', 52.3283777, 1.6753005, 12, 'some descriptive text']
            <?php 
             //this PHP is a working Javascript array of marker data
             // disabled for testing but seems ok.
             //print $placesOutput;
             ?>
        ];

        function setMarkers(map) {
            // Adds markers to the map.

            for (var i = 0; i < places.length; i++) {
                var business = places[i];

                var marker = new google.maps.Marker({
                    title: business[0],
                    position: {lat: business[1], lng: business[2]},
                    map: map,
                    zIndex: business[3]
                });
                google.maps.event.addListener(places, 'click', function (){
                    infowindow.setContent(business[4]);
                    infowindow.open(map, this);
                })
            }
        }
       **/
    </script>
    <script type="text/javascript" defer async
            src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
    </script>
</head>

<body>
     <div id='map' style='height:500px;width:500px;'></div>
</body>
</html>

What I've tried so far:

The source code is from the Google developer docs here and various related Google pages. Code for the multiple markers info window was from another site.

I have read this question, this question and this question - the third question caused me to reorder my code so that the reference to the API came after the functions were established.

  • I have NO ERRORS in consoles on browsers (Firefox/Chrome); I don't seem to have any javascript errors.

  • I am currently testing without PHP data so Question 2 would not apply here.

  • My API key is correctly working.

  • I have tried reordering the Javascript code as well as placing the code before/after the DIV element, but no change.

  • Disabling the places array, setMarker function, and infoWindow function also does not make it work.

  • There is no other javascript running on the page.

I'm sure it's something simple but I can't see it....

Community
  • 1
  • 1
Martin
  • 22,212
  • 11
  • 70
  • 132
  • Most likely your `initMap` function is called before the `#map` element exists. If you move your ` – Turnip Jul 07 '16 at 12:47
  • well that's just bloody confusing. I've checked my CSP and nothing is preventing access to the map API, any ideas why the page div content is just a blank box? – Martin Jul 07 '16 at 12:51
  • I did move the elements to the bottom of the page but this didn't seem to fix it. – Martin Jul 07 '16 at 12:51
  • By "elments" do you mean the script that loads google maps? – Turnip Jul 07 '16 at 12:52
  • @Turnip sorry, yes, I mean the script call reference to the API and the in-page script. layout: ``. – Martin Jul 07 '16 at 12:53
  • Move your DOM access outside of the `initMap` function call so you can check that it doesn't return null. Make sure your map div has appropriate width/height properties, etc. etc. – Jared Smith Jul 07 '16 at 12:54
  • My rep is not in Javascript. @JaredSmith although I agree, it's a silly block that I can't figure out. I have the div set width/height. I have confirmed by API key works correctly. – Martin Jul 07 '16 at 12:55
  • @Martin yeah I edited out that part of the comment about rep because I thought (after I wrote it) that it was overly harsh. Start by rewriting the function in a way that lets you set appropriate break points. Inlining the DOM access in a function call that way is bad-ish because it makes it difficult to check that it returned a DOM element instead of null. – Jared Smith Jul 07 '16 at 13:02
  • 1
    You should also put a breakpoint in your initmap fn to make sure it actually gets called, check the network tab in dev tools to make sure your requests didn't fail, check the console for errors, etc. Basic debugging stuff. – Jared Smith Jul 07 '16 at 13:05
  • Thanks, yeah the console log debugging is done, no errors are coming up but also no map. I will explore if the `initMap` function actually runs. While having it in the page is not ideal I will look at moving it to its own .js file, once it works (or possibly before) – Martin Jul 07 '16 at 13:06
  • hah, and just FYI I **hate** javascript. – Martin Jul 07 '16 at 13:07

1 Answers1

1

I found the issue.

As expected it was extremely stupid.

There was another unrelated element on the page that also had the id='map' reference. Changing the id referece in the map javascript to a unqiue id fixed the display issue fully.

Martin
  • 22,212
  • 11
  • 70
  • 132