Add multiple markers in google map gives "Cannot create property 'clickable' on string '1'"

Question

I get a string from a servlet in my javascript which is actually an arraylist. I use gson to make the list into json and send response to js. I use var data = JSON.parse(xhr.responseText). The data contains location coordinates.

data contains something like this: ["12.1456","73.12453","12.786945","75.13451","12.4724,"78.12545"]

I store the latitudes in latArray and longitudes in lngArray like this:

for(i=0;i < data.length;i++)     
{                     
    if(i%2==0)
    {
        latArray = data[i];
        console.log(data[i]);
    }
    else
    {
        lngArray = data[i];
    }
}

Adding the values in the latArray and lngArray in marker code like this:

function initMap() {
      var mapDiv = document.getElementById('map');
      var map = new google.maps.Map(mapDiv, {
        center: {lat: bla.blahh, lng: blaa.blaahh},
        zoom: 15
      });
     for(i=0;i<data.length;i++)
      {
        var marker = new google.maps.Marker({
          //position: {lat:latArray[i],lng:latArray[i+1]},
          position: new google.maps.Marker(latArray[i],lngArray[i+1]),
          map: map,
          title:"This is the place."
        });  
      }
    }

But I get this error: js?callback=initMap:59 Uncaught TypeError: Cannot create property 'clickable' on string '1'

I dont know for sure if it's saying I have error in line 59. Here's what is in line 59 of the initMap()

var map = new google.maps.Map(mapDiv, {
        center: {lat: bla.blahh, lng: blaa.blaahh},
        zoom: 15
      });

Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. — geocodezip, Mar 12 '16 at 06:53
@geocodezip are you saying this isn't minimal, readable? can't you understand what i've asked? — , Mar 12 '16 at 07:00
@geocodezip. i honestly dont understand what is wrong with the question. people are not even viewing my question — , Mar 12 '16 at 07:13
Your question is certainly not complete. Until you added sample data there was no way to reproduce the issue. Now it just would require a bunch of work and `center: {lat: bla.blahh, lng: blaa.blaahh},` is obviously not the real code. A StackOverflow "code snippet" which is runnable and produces the error would be helpful. — geocodezip, Mar 12 '16 at 07:23
@geocodezip. im getting the string from a servlet. so i cant make the code runnable — , Mar 12 '16 at 08:29

score 0 · Answer 1 · edited Mar 12 '16 at 16:44

0

try using: LatLng() method

for(i=0;i < data.length;i++)
{
   var marker = new google.maps.Marker({
      //position: {lat:latArray[i],lng:latArray[i+1]},
      position: new google.maps.LatLng(latArray[i],lngArray[i+1]),
      map: map,
      title:"This is the place."
   });  
}

edited Mar 12 '16 at 16:44

geocodezip

158,664
13
220
245

answered Mar 12 '16 at 05:48

Rajesh Gajraj

15
4

is array `data` is defined? – Rajesh Gajraj Mar 12 '16 at 06:00
yeah. i even saw its values in `console.log` – Mar 12 '16 at 06:01
im getting it the first time i run. the next time it's not showing that error – Mar 12 '16 at 06:03
see related post regarding google marker on stack overflow. link is [here](http://stackoverflow.com/q/3059044/5954935) – Rajesh Gajraj Mar 12 '16 at 06:06

score 0 · Accepted Answer · edited May 23 '17 at 11:59

You have typos in your code.

Minimal, Complete, Tested and Readable example: fiddle

This doesn't make any sense (and is what is generating the error reported):

var marker = new google.maps.Marker({
  position: new google.maps.Marker(latArray[i],lngArray[i+1]),
  map: map,
  title: "This is the place."
});

the position property of a google.maps.MarkerOptions object should be a google.maps.LatLng object not a google.maps.Marker object.

This doesn't make sense:

for (i = 0; i < data.length; i++) {
  if (i % 2 == 0) {
    latArray = data[i];
  } else {
    lngArray = data[i];
  }
}

If latArray and lngArray are arrays, push the data on to them or use latArray[some_index] = data[i].

working fiddle

code snippet:

var data = ["12.1456", "73.12453", "12.786945", "75.13451", "12.4724", "78.12545"];

var latArray = [];
var lngArray = [];

function initMap() {
  for (i = 0; i < data.length; i++) {
    if (i % 2 == 0) {
      // was latArray = data[i];
      latArray.push(data[i]);
    } else {
      // was lngArray = data[i];
      lngArray.push(data[i]);
    }
  }

  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
    // was {lat: bla.blahh, lng: blaa.blaahh}
    center: {
      lat: 42,
      lng: -72
    },
    zoom: 15
  });
  var bounds = new google.maps.LatLngBounds();
  // was data.length
  for (i = 0; i < latArray.length; i++) {
    var marker = new google.maps.Marker({
      // was new google.maps.Marker(latArray[i],lngArray[i+1]),
      position: new google.maps.LatLng(latArray[i], lngArray[i]),
      map: map,
      title: "This is the place."
    });
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Add multiple markers in google map gives "Cannot create property 'clickable' on string '1'"

2 Answers2