My Google map wont display in chrome after following a video tutorial, need help.

Question

1.00/5 (2 votes)

See more:

Hi there,

Google Maps JavaScript API Tutorial - YouTube[^]

I followed the video tutorial above which is called "

Google Maps JavaScript API Tutorial".

My problem is that when I compile it on chrome, it displays the title I set but not the google map itself with the markers.

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Arduino Smart Stick Location Map</title>
  <style>
    #map{
      height:400px;
      width:100%;
    }
  </style>
</head>
<body>
  <h1>Arduino Smart Stick Location Map</h1>
  <div id="map"></div>
  <script>
    function initMap(){
      // Map options
      var options = {
        zoom:10,
        center:{lat:53.4808,lng:-2.2426}
      }

      // New map
      var map = new google.maps.Map(document.getElementById('map'), options);

      // Listen for click on map
      google.maps.event.addListener(map, 'click', function(event){
        // Add marker
        addMarker({coords:event.latLng});
      });

      /*
      //Add marker
      var marker = new google.maps.Marker({
        position:{lat:53.4808,lng:-2.2426},
        map:map,
        icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
      });

      var infoWindow = new google.maps.InfoWindow({
        content:'<h1>Lynn MA</h1>'
      });

      marker.addListener('click', function(){
        infoWindow.open(map, marker);
      });
      */

      // Array of markers
      var markers = [
        {
          coords:{lat:53.470912,lng:-2.241365},
          iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
          content:'<h1>John Dalton East Carpark</h1>'
        },
        {
          coords:{lat:53.471740,lng:-2.240842},
          content:'<h1>John Dalton East Tower</h1>'
        },
        {
          coords:{lat:53.472499,lng:-2.240830}
		  content:'<h1>John Dalton Foods</h1>'
        },
		{
          coords:{lat:53.470493,lng:-2.238513}
		  content:'<h1>AllSaints Park</h1>'
        },
		{
          coords:{lat:53.442371,lng:-2.201845}
		  content:'<h1>My Home</h1>'
        }
      ];

      // Loop through markers
      for(var i = 0;i < markers.length;i++){
        // Add marker
        addMarker(markers[i]);
      }

      // Add Marker Function
      function addMarker(props){
        var marker = new google.maps.Marker({
          position:props.coords,
          map:map,
          //icon:props.iconImage
        });

        // Check for customicon
        if(props.iconImage){
          // Set icon image
          marker.setIcon(props.iconImage);
        }

        // Check content
        if(props.content){
          var infoWindow = new google.maps.InfoWindow({
            content:props.content
          });

          marker.addListener('click', function(){
            infoWindow.open(map, marker);
          });
        }
      }
    }
  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4mOCKmQe-ZovpqDeyvmTnrTK2Spcewzo-4M&callback=initMap">
    </script>
</body>
</html>

Why is only displaying the title and not the map with the markers and how can I go about resolving the issue ?

What I have tried:

YouTube Tutorials, Stackoverflow forum and javascript tutorials

Posted 19-Feb-19 6:04am

Member 13710355

Add a Solution

Comments

ZurdoDev 19-Feb-19 13:25pm

I'd suggest looking in the console of chrome's developer tools to see what the error is, if any.

Richard MacCutchan 19-Feb-19 13:30pm

Did you ask the person who wrote the tutorial?

Kornfeld Eliyahu Peter 20-Feb-19 5:25am

Open your built in debugger and see the errors...
Like https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

GSThakur · Answer 1 · 2019-02-21T01:43:00

Solution 1

There were some hidden characters which were causing an issue. Just copy and paste below piece (you may not find differences but do it).

JavaScript

// Array of markers
var markers = [
  {
    coords:{lat:53.470912,lng:-2.241365},
    iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    content:'<h1>John Dalton East Carpark</h1>'
  },
  {
    coords:{lat:53.471740,lng:-2.240842},
    content:'<h1>John Dalton East Tower</h1>'
  },
  {
    coords:{lat:53.472499,lng:-2.240830},
    content:'<h1>John Dalton Foods</h1>'
  },
  {
    coords:{lat:53.470493,lng:-2.238513},
    content:'<h1>AllSaints Park</h1>'
  },
  {
    coords:{lat:53.442371,lng:-2.201845},
    content:'<h1>My Home</h1>'
  }];

Posted 21-Feb-19 1:43am

GSThakur

Updated 21-Feb-19 2:21am

Comments

Richard Deeming 22-Feb-19 11:38am

Rather than a cryptic comment about "hidden characters", you could just have explained that there were missing commas between the coords and content properties for all but the first two markers.

{
    coords:{lat:53.472499,lng:-2.240830}
    content:'<h1>John Dalton Foods</h1>'
},

vs

{
    coords:{lat:53.472499,lng:-2.240830},
    content:'<h1>John Dalton Foods</h1>'
},

Member 13710355 23-Feb-19 12:05pm

Thank you for your help

GSThakur 1-Mar-19 8:04am

Good catch, I didn't noticed that difference. My style of debugging for an issue is different. Lot many other solution providers might have read your question and I'm hoping you also could have spent good amount of hours to make this working. Earlier, for such similar issue, I spent sleepless night, just for hidden ASCII chars.

However, if the solution worked for you, please mark as accepted solution.