Uncaught InvalidValueError: setMap: not an instance of Map

Question

when i used the sencha touch2.2.1,i met a question. In the viewer:

items: [{
    id: 'mapCanvas',
    xtype:'map',
    useCurrentLocation: true,
}]

In the controller:

var map= Ext.getCmp('mapCanvas');
console.dir(map);
var marker= new google.maps.Marker({
                position: new google.maps.LatLng(25,118),
            });
marker.setMap(map);

report the error:

Uncaught InvalidValueError: setMap: not an instance of Map, and not an instance of StreetViewPanorama

I can see the map,but i can't see the marker, and how to solve the problem?

score 18 · Answer 1 · answered Feb 22 '14 at 17:53

18

Try this:

    marker = new google.maps.Marker({
                position : position,
                setMap : map
            });

It worked for me!

answered Feb 22 '14 at 17:53

Chris

185
1
8

3

what's the diff between setMap and map then? – Miguel Stevens Jul 14 '14 at 21:35
Jip, I can confirm this worked for me as well .... but I have no idea why? Some more information would be great! – Richard Bailey Aug 15 '16 at 09:27

score 5 · Answer 2 · edited Sep 23 '16 at 11:36

5

map is not an instance of google map .

var map= Ext.getCmp('mapCanvas').getMap(); // add getMap() here to get the map instance
console.dir(map);
var marker= new google.maps.Marker({
    position: new google.maps.LatLng(25,118),
});
marker.setMap(map);

edited Sep 23 '16 at 11:36

Vishal Tanna

1,165
2
12
36

answered Mar 22 '14 at 16:15

zizoujab

7,603
8
41
72

score 2 · Answer 3 · answered Oct 07 '16 at 07:17

You can add the marker to the map directly by using the marker's setMap() method, as shown in the example below:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

score 1 · Answer 4 · answered Sep 07 '15 at 20:39

var map is a HTML element you need an instance of the google.maps.Map Object

var map = google.maps.Map(document.querySelector("#mapCanvas"),{
      center: new google.maps.LatLng(24.027872, -104.655278),
      zoom: 12
    });

then....

var marker= new google.maps.Marker({
  position: new google.maps.LatLng(25,118),
  map: map
    });

score 0 · Answer 5 · answered Nov 15 '13 at 15:03

0

The marker.setMap method expects the argument to be a google.maps.Map object. This is not one of those:

var map= Ext.getCmp('mapCanvas');

answered Nov 15 '13 at 15:03

geocodezip

158,664
13
220
245

score 0 · Answer 6 · answered Nov 21 '13 at 09:39

Try this:

var  latlngbounds = new google.maps.LatLngBounds(),
     position = new google.maps.LatLng(25,118),
     marker = new google.maps.Marker({
            position : position,
            map : map
        }); 

latlngbounds.extend(position);

map.fitBounds(latlngbounds);

Here map is the rendered google.map.Map instance

score 0 · Answer 7 · answered Feb 06 '15 at 21:23

mapCanvas is Ext map component which holds the map instance.

var map= Ext.getCmp('mapCanvas');
console.dir(map);
var marker= new google.maps.Marker({
                    position: new google.maps.LatLng(25,118),
              });
marker.setMap(map.getMap());

Uncaught InvalidValueError: setMap: not an instance of Map

7 Answers7

Linked