"SyntaxError: missing: after property id" "uncaught exception: Object" when i try to add more markers on map

Question

I want to put more markers on the map. The problem is that the map is not loaded and gives me the errors:

"SyntaxError: missing: after property id" "uncaught exception: Object"

<html>
 <head>
 <!-- styles put here, but you can include a CSS file and reference it instead! -->
   <style type="text/css">
     html, body { height: 100%; margin: 0; padding: 0; }
     #map { height: 100%; }
   </style>
 </head>
 <body>
   <div id="map"></div>
   <script type="text/javascript">
     // Create a map variable
     var map;
     var markers = [];
     // Function to initialize the map within the map div
     function initMap() {
       map = new google.maps.Map(document.getElementById('map'), {
         center: {lat: 40.74135, lng: -73.99802},
         zoom: 14
       });

     var locations = [
        {title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}},
        {title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}}
      ];

      var largeInfowindow = new google.maps.InfoWindow();
      for(var i = 0; i<locations.length; i++){
        var positions = locations[i].location;
        var title = locations[i].title;
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          title: title,
          animation: google.maps.Animation.DROP,
          id: i
        });
        markers.push(marker);
        // onclick
        marker.addListener('click', function (){
          populateInfoWindow(this, largeInfowindow);
        });
      }

      function populateInfoWindow(marker, infowindow){
        // verifica daca fereastra de info nu este deja deschisa
        if(infowindow.marker !=marker){
          infowindow.marker = marker;
          infowindow.setContent('<div>' + marker.title + '</div>');
          infowindow.open(map, marker);
          infowindow.addListener('closeclick', function(){
            infowindow.setMarker(null);
          });
        }
      }

      var largeInfowindow = new google.InfoWindow();
      var bounds = new google.maps.LatLngBounds();
      // crearea unei arii de markere
      for (var i = 0; i < locations.length; i++){
        // ia pozitia 
        var position = locations[i].location;
        var title = locations[i].title;
        //crearea unui marker per locatie si punerea lui in aria de markere
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          title: title,
          animation: google.maps.Animation.DROP,
          id: i
        });
        //push the marker to our array of markers
        markers.push(marker);
        //extinderea ariei pt markere
        bounds.extend(marker.position);
        //onclick
        marker.addListener('click', function (){
          populateInfoWindow(this, largeInfowindow);
        });
      }
      map.fitBounds(bounds);
     }

   </script>
   <!--TODO: Insert your API Key in the below call to load the API.-->
   <script async defer
     src="https://maps.googleapis.com/maps/api/js?v=3&key=MY_API_KEY&callback=initMap">
   </script>
 </body>
</html>

The web page should display some markers getting the latlong from a vector i created. I have tried some solutions I've found online but did not manage to solve the issue.

Does this answer your question? [How can I check whether Google Maps is fully loaded?](https://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded) — BernhardS, Dec 05 '19 at 11:25

score 0 · Answer 1 · answered Dec 05 '19 at 12:41

You have a typo on these lines:

var locations = [
    {title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}},
    {title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}}
  ];

the comma after 40 should be a period:

var locations = [
    {title: 'Markerul', location: {lat: 40.7713024, lng: -73.9632393}},
    {title: 'Markerul', location: {lat: 40.7713024, lng: -73.9632393}}
  ];

Then a new error: Uncaught (in promise) TypeError: google.InfoWindow is not a constructor

Another typo:

var largeInfowindow = new google.InfoWindow();

Should be:

var largeInfowindow = new google.maps.InfoWindow();

code snippet:

<html>
 <head>
 <!-- styles put here, but you can include a CSS file and reference it instead! -->
   <style type="text/css">
     html, body { height: 100%; margin: 0; padding: 0; }
     #map { height: 100%; }
   </style>
 </head>
 <body>
   <div id="map"></div>
   <script type="text/javascript">
     // Create a map variable
     var map;
     var markers = [];
     // Function to initialize the map within the map div
     function initMap() {
       map = new google.maps.Map(document.getElementById('map'), {
         center: {lat: 40.74135, lng: -73.99802},
         zoom: 14
       });

     var locations = [
        {title: 'Markerul', location: {lat: 40.7713024, lng: -73.9632393}},
        {title: 'Markerul', location: {lat: 40.771, lng: -73.963393}} // make locations different
      ];

      var largeInfowindow = new google.maps.InfoWindow();
      for(var i = 0; i<locations.length; i++){
        var positions = locations[i].location;
        var title = locations[i].title;
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          title: title,
          animation: google.maps.Animation.DROP,
          id: i
        });
        markers.push(marker);
        // onclick
        marker.addListener('click', function (){
          populateInfoWindow(this, largeInfowindow);
        });
      }

      function populateInfoWindow(marker, infowindow){
        // verifica daca fereastra de info nu este deja deschisa
        if(infowindow.marker !=marker){
          infowindow.marker = marker;
          infowindow.setContent('<div>' + marker.title + '</div>');
          infowindow.open(map, marker);
          infowindow.addListener('closeclick', function(){
            infowindow.setMarker(null);
          });
        }
      }

      var largeInfowindow = new google.maps.InfoWindow();
      var bounds = new google.maps.LatLngBounds();
      // crearea unei arii de markere
      for (var i = 0; i < locations.length; i++){
        // ia pozitia 
        var position = locations[i].location;
        var title = locations[i].title;
        //crearea unui marker per locatie si punerea lui in aria de markere
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          title: title,
          animation: google.maps.Animation.DROP,
          id: i
        });
        //push the marker to our array of markers
        markers.push(marker);
        //extinderea ariei pt markere
        bounds.extend(marker.position);
        //onclick
        marker.addListener('click', function (){
          populateInfoWindow(this, largeInfowindow);
        });
      }
      map.fitBounds(bounds);
     }

   </script>
   <!--TODO: Insert your API Key in the below call to load the API.-->
   <script async defer
     src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
   </script>
 </body>
</html>

If this answered your question, please [accept it](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) — geocodezip, Dec 05 '19 at 13:09

"SyntaxError: missing: after property id" "uncaught exception: Object" when i try to add more markers on map

1 Answers1