CODEWITHSUNDEEP
javascripthtmlgoogle-maps-api-3
Victor --------
Victor --------

Reputation: 512

"Uncaught TypeError: this.setValues is not a function" using Google Maps API v3

Trying to modify an example and use markerLabel class instead of google.maps.marker. Searched for a resolution here but couldn't find anything.

The markerwithlabel is declared as var marker = new MarkerWithLabel({

I get this error 

Uncaught TypeError: this.setValues is not a function

Please check the codepen bellow. https://codepen.io/anon/pen/LgOzRO

I tried to include only the code related to this issue and the minimal code required to reproduce this.

 var map;
var locations = [];

function initialiseMap() {
  $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/1fBLlw8xlO_yhL8rYfFlQnzvKR-swEtE7NRX41ysARCk/values/Sheet1!A2:Q?key=AIzaSyD112yF6ORTtrx1-ugfhJLcx1VHDOla1Vs", function(data) {
        // data.values contains the array of rows from the spreadsheet. Each row is also an array of cell values.
        // Modify the code below to suit the structure of your spreadsheet.
        $(data.values).each(function() {
            var location = {};
                location.title = this[2];
                location.latitude = parseFloat(this[15]);
                location.longitude = parseFloat(this[16]);

                locations.push(location);
        });

      // Center on (0, 0). Map center and zoom will reconfigure later (fitbounds method)
      var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(0, 0)
      };
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      setLocations(map, locations);
  });
}


function setLocations(map, locations) {
  var bounds = new google.maps.LatLngBounds();
  // Create nice, customised pop-up boxes, to appear when the marker is clicked on
  var infowindow = new google.maps.InfoWindow({
    content: "Content String"
  });
  for (var i = 0; i < locations.length; i++) {
    var new_marker = createMarker(map, locations[i], infowindow);
    bounds.extend(new_marker.position);
  }
  map.fitBounds(bounds);
}

function createMarker(map, location, infowindow) {

  // Modify the code below to suit the structure of your spreadsheet (stored in variable 'location')
  var position = {
    lat: parseFloat(location.latitude),
    lng: parseFloat(location.longitude)
  };
  var marker = new MarkerWithLabel({
    position: position,
    map: map,
    title: location.title,
     labelClass: "labels", // the CSS class for the label
        labelInBackground: false,
        icon: pinSymbol('red')
  });
  google.maps.event.addListener(marker, 'click', function() {

  });
  return marker;
}

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 2
    };
}

Upvotes: 1

Views: 2799

Answers (1)

thornjad
thornjad

Reputation: 155

You're having a sequencing issue on the HTML side. When loading Javascript with a <script> tag, you should use async or defer, not both. In this case, the Google API should be loaded after the page's Javascript such that the callback, initialiseMap, is defined in time, so it should have the defer attribute. However, the Google API needs to be loaded before the V3 MarkerWithLabel is loaded, so the V3 script also needs the defer attribute and needs to go after the Google API script.

So your HTML should be

<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD112yF6ORTtrx1-ugfhJLcx1VHDOla1Vs&callback=initialiseMap"></script>
<script defer src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>

Upvotes: 4

Related Questions