CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
samjhana joshi
samjhana joshi

Reputation: 2015

Google Map : InvalidValueError: setLabel: not a string; and no text property

I am trying to create a google map with directions and for the purpose using Polyline. But I am getting the above console errors and I just can't get what is the problem here. Code : 

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
var marker;
var infowindow;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
var markers = {};
var currentId = 0;
var uniqueId = function() {
    return ++currentId;
}
var edit = 0;
var direction = '';
var linecordinates = [];
var map;
var sortorder = 0;
var latest_marker;
var latest_latlng;
var lineSymbol;
var flightPath;
var line = [];

var saved_locations = $("#hidden_lat_long").val();
// saved_locations = [{"label":1,"lat":"27.7233","long":"85.2783"},{"label":2,"lat":"27.7625","long":"85.3411"},{"label":3,"lat":"27.7056","long":"85.4166"},{"label":4,"lat":"27.6704","long":"85.3209"}]

function initialize() {
    lineSymbol = {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
    };
    /* edit portion */
    if(saved_locations != '') {
        edit = 1;
        saved_locations = JSON.parse(saved_locations);
        currentId = labelIndex = sortorder = saved_locations.length;
    }
    /* edit portion */
    var latlng = new google.maps.LatLng(27.7238,85.3214);
    var options = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), options);

    /* edit portion */
    if(edit) {
        for( i = 0; i < saved_locations.length; i++ ) {
            var position = new google.maps.LatLng(saved_locations[i].lat, saved_locations[i].long);
            var id = saved_locations[i].label;

            var saved_label = saved_locations[i].label;
            marker = new google.maps.Marker({
                id: id,
                position: position,
                map: map,
                label: saved_label,
            });
            console.log(marker);
            markers[id] = marker;

            linecordinates.push({
                id: id,
                lat: parseFloat(saved_locations[i].lat),
                lng: parseFloat(saved_locations[i].long)
            });
        }

        flightPath = new google.maps.Polyline({
            path: linecordinates,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            icons: [{
              icon: lineSymbol,
              offset: '100%'
            }],
        });
        addline();
    }
    /* edit portion */
}
google.maps.event.addDomListener(window, 'load', initialize);
function addline() {
    line.push(flightPath);
    flightPath.setMap(map);
}
<div id="map-canvas"></div>

Any help/suggestions are welcome.

Upvotes: 4

Views: 9774

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

The error-message is self-explaining. The label-properties in saved_locations are not of type String, they are Numbers.

You must enclose the values in double-quotes:

[{"label":"1","lat":"27.7233","long":"85.2783"},{"label":"2","lat":"27.7625","long":"85.3411"},{"label":"3","lat":"27.7056","long":"85.4166"},{"label":"4","lat":"27.6704","long":"85.3209"}]

...or convert them:

var saved_label = String(saved_locations[i].label);

Upvotes: 11

Related Questions