CODEWITHSUNDEEP
extjsgoogle-maps-api-3extjs4
Michael Jackson
Michael Jackson

Reputation: 376

GMapPanel not showing Marker

I'm learning how to work with Ext.js, so I'm really newbie.

I built a Map using Google Maps API, and I'm trying to add markers to a specific location, but the markers are not being shown and I don't receive any errors on my console, the only thing I can see is the map itself, I would like to know what am I doing wrong here.

My Code:

Ext.onReady(function () {
    var w = Ext.create('Ext.window.Window', {
        height: 400,
        width: 600,
        layout: 'fit',
        header: false,
        border: false,
        style: 'padding: 0; border-width: 0;',
        closable: false,
        draggable: false,
        height: Ext.getBody().getViewSize().height,
        width: Ext.getBody().getViewSize().width,
        items: [{
            xtype: 'gmappanel',
            region: 'center',
            cls: 'reset-box-sizing',
            center: new google.maps.LatLng(53.419824, -3.0509294),
            mapOptions: {
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
        }]
    });

    var options = {
        lat: 53.419824,
        lng: -3.0509294,
        marker: {
            title: "Hello World!"
        },
        listeners: {
            click: function (e) {

            }
        }
    };

    addLocation(options);

    function addLocation(options) {

        var gm = w.down('gmappanel');
        var mpoint = new google.maps.LatLng(options.lat, options.lng);

        var marker = gm.addMarker(mpoint, options.marker, false, false, options.listeners);


        var infowindow = new google.maps.InfoWindow({
            content: "Some label"
        });
        google.maps.event.addListener(marker, 'click', function (gm, marker) {
            infowindow.open(gm, marker); // if still you can not open than use infowindow.open(gm, this)
        });
    }

    w.show();
});

Thank You.

Upvotes: 0

Views: 406

Answers (1)

fen1ksss
fen1ksss

Reputation: 1120

Try to create marker with the following code:

var markers = [];

var mpoint = new google.maps.LatLng(options.lat, options.lng);

var marker = new google.maps.Marker({
    position: mpoint,
    title: options['marker']['title']
});

var infowindow = new google.maps.InfoWindow({
    content: "Some label"
});

google.maps.event.addListener(marker, 'click', function (gm, marker) {
    infowindow.open(gm, marker); // if still you can not open than use infowindow.open(gm, this)
});

markers.push(marker);

gm.markers = markers;

or even more simply

var gm = w.down('gmappanel');
var markers = [];

markers.push(marker);

gm.markers = markers;

You can find the working example here https://fiddle.sencha.com/#fiddle/1rt5

Upvotes: 1

Related Questions