'Google Map marker errors, InvalidValueError

Trying to display multiple markers but it's not working.

I'm trying to display multiple markers on google maps but I'm getting multiple errors InvalidValueError: setTitle: not a string.

InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: NaN is not an accepted value

<script>
        let cord = []
        $(`.cord`).each(( i , el) => {
            cord[i] = {
               'latitude': Number($(el).data('latitude')),
               'longitude': Number($(el).data('longitude')),
            }
        });
              // Initialize and add the map
              function initMap() {
                let uluru;
                uluru = { lat: -33, lng: 151 };
                 // The map, centered at Uluru
                const map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 4,
                    center: uluru,
                });
                var i = 0;
                while(Object.values(cord).length>i){                    
                // The marker, positioned at Uluru
                const map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 4,
                    center: uluru,
                });
                uluru = { lat: cord[i]['latitude'], lng: cord[i]['longitude'] };
                    const marker = new google.maps.Marker({
                        position: uluru,
                        map: map,
                        title: i,
                        });
                  i++;
                } //loop
              }   //map
    </script>

Solution 1:^[1]

i is not a string, it is a number. To fix the error, InvalidValueError: setTitle: not a string, change it to one:

const marker = new google.maps.Marker({
                        position: uluru,
                        map: map,
                        title: "" + i, // Change `i` to a string
                        });

let cord = []
$(`.cord`).each((i, el) => {
  cord[i] = {
    'latitude': Number($(el).data('latitude')),
    'longitude': Number($(el).data('longitude')),
  }
});
// Initialize and add the map
function initMap() {
console.log(cord);
  let uluru;
  uluru = {
    lat: -33,
    lng: 151
  };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  var i = 0;
  while (Object.values(cord).length > i) {
    uluru = {
      lat: cord[i]['latitude'],
      lng: cord[i]['longitude']
    };
    const marker = new google.maps.Marker({
      position: uluru,
      map: map,
      title: ""+i,
    });
    i++;
  } //loop
} //map

html, body, #map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div class="cord" data-latitude="-33" data-longitude="151"></div>
    <div class="cord" data-latitude="-34.9284989" data-longitude="138.6007456"></div>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Google Map marker errors, InvalidValueError

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]