PDA

View Full Version : Clear Google Map Markers Using MVC Structure



clubby
3 Jan 2012, 9:52 AM
Before switching to the MVC structure, I managed my google map markers using a global variable that stored the markers array. From what I can tell in Google's documentation, this is the only way to clear markers from a map (see example below). How would I do this using the MVC structure? Is there a way to have a global variable that stores the marker array? Any other ideas?

Global Variable Method (this works):



Ext.setup({
viewport: {autoMaximize: false},
onReady: function() {


var mapMarkersArray = []; //global variable used to manage map markers


function addMarkersToMap(markerPositions) {
//markerPositions is an array of google LatLng objects
for (var i = 0; i < markerPositions.length; i++){
marker = new google.maps.Marker({
map: resultsMap.map,
position: markerPositions[i]
});
mapMarkersArray.push(marker);
}
}


function deleteMarkersFromMap() {
if (mapMarkersArray) {
for (var i=0; i < mapMarkersArray.length; i++) {mapMarkersArray[i].setMap(null);}
mapMarkersArray.length = 0;
}
}

//Rest of Code...
});
})


My MVC code in my MapController:


init: function () {
this.control({
'resultsmap': {
maprender: this.renderResultsMap
}
});
},


renderResultsMap: function(thisMap, map, eOpts) {
var resultsStore = this.getResultsStore,
results = resultsStore.getItems();


var markerPositions = [];
for (var i = 0; i < results.length; i++){
markerPosition = new google.maps.LatLng(results[i].data.lat, results[i].data.lng);
markerPositions.push(markerPosition);
}
this.addMarkersToMap(map, markerPositions);

//other code...
},


addMarkersToMap: function(map, markerPositions) {
for (var i = 0; i < markerPositions.length; i++){
marker = new google.maps.Marker({
map: map,
position: markerPositions[i]
});
}
},

// Rest of code...


Thanks for the help!!

mitchellsimoens
3 Jan 2012, 9:58 AM
This is a Google Maps thing. On the marker, you use the setMap method and pass in null:


marker.setMap(null);

clubby
3 Jan 2012, 10:17 AM
Mitchell - thanks for the quick response!

I know how to clear a marker when I have an array of markers. My issue is that I don't know how to store an array of markers after I create them (for instance, using a global variable). I'd like to be able to access the marker array from another function like clearMarkersFromMap that would be called when the search results are updated, for instance.

I looked for ways to get the marker array from the map, but Google doesn't have any methods to do so.

mitchellsimoens
3 Jan 2012, 10:40 AM
I would have an array placed onto the Ext.Map component and when you add a marker, push it onto the array. In your addMarkersToMap method, I would pass the Ext.Map component instead of the Google map instance. Then in your loop you could do map.markers.push(marker);

clubby
3 Jan 2012, 11:51 AM
Great, thanks for the tip Mitchell - that worked for me. I didn't realize I could add an array to a component, but I guess that makes sense.

lukilooks
12 Apr 2012, 7:20 PM
@mitchellsimoens

sorry for interupt a discussion, i'm very newbie in sencha touch, also less knowledge for javascript-ing.
Now i learn to create simple app with sencha touch 2 google map display with infowindow and marker, can you give example or guide how to create it, i've succes show a map panel and made list item for a name of location via JSON file, also latitude and longitude from JSON file too. for next i want if my place name list is tap, map panel show a location also with marker and infowindow too...that's it, but i never success after try more tutorial.

this is a code i've done so far

app.js


Ext.Loader.setConfig({
enabled: true
});


Ext.application({
models: [
'Hotels'
],
stores: [
'Hotels'
],
views: [
'MapPanel',
'LeftPanel',
'AppContainer'
],
name: 'MyApp',
controllers: [
'HotelMap'
],


launch: function() {


Ext.create('MyApp.view.AppContainer', {fullscreen: true});
}


});


View
AppContainer.js


Ext.define('MyApp.view.AppContainer', {
extend: 'Ext.Container',
requires: [
'MyApp.view.LeftPanel',
'MyApp.view.MapPanel'
],


config: {
layout: {
type: 'fit'
},
items: [
{
xtype: 'leftpanel',
id: 'leftpanel'
},
{
xtype: 'container',
id: 'mapcontent',
layout: {
animation: 'slide',
type: 'card'
},
items: [
{
xtype: 'mappanel'
}
]
}
]
}


});


LeftPanel.js


Ext.define('MyApp.view.LeftPanel', {
extend: 'Ext.Panel',
alias: 'widget.leftpanel',


config: {
docked: 'left',
style: 'border-right:solid 1px #006699;',
width: 230,
layout: {
type: 'fit'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: '<div style="margin:8px 0 0 0;" align="center"><table><tr><td><img src="src/capture/kagum.png"/></td></tr></table></div>'
},
{
xtype: 'list',
itemId: 'MyList',
itemTpl: [
'<div class="capture" style="background-image:url(src/capture/{capture});"></div>',
'<div>{hotelName}</div>',
'<div class="small">{hotelCity}</div>'
].join(''),
store: 'hotels',
grouped: true
}
]
}


});


MapPanel.js


Ext.define('MyApp.view.MapPanel', {
extend: 'Ext.Panel',
alias: 'widget.mappanel',


config: {
ui: '',
layout: {
type: 'fit'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: 'Hotels Map'
},
{
xtype: 'map',
id: 'HotelMap',
styleHtmlContent: true,
mapOptions: {
center : new google.maps.LatLng(-6.903251,107.609711),
zoom: 13,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
useCurrentLocation: true
}
]
}


});


Store
Hotels.js


Ext.define('MyApp.store.Hotels', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Hotels'
],


config: {
autoLoad: true,
model: 'MyApp.model.Hotels',
storeId: 'hotels',
proxy: {
type: 'ajax',
url: 'src/data/hotels.json',
reader: {
type: 'json',
rootProperty: 'hotels'
}
},
sorters: {
property: 'hotelName'
},
grouper: {
property: 'hotelCity'
}
}
});


Model
Hotels.js


Ext.define('MyApp.model.Hotels', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'hotelName'
},
{
name: 'hotelCity'
},
{
name: 'title'
},
{
name: 'address'
},
{
name: 'capture'
},
{
name: 'latitude',
type: 'int'
},
{
name: 'longitude',
type: 'int'
}
]
}
});


Controller
HotelMap.js


Ext.define('MyApp.controller.HotelMap', {
extend: 'Ext.app.Controller',
config: {
refs: {
MyList: 'MyList',
HotelMap: 'HotelMap'
},


control: {
"#MyList": {
itemtap: 'onListItemTap'
}
}
},


onListItemTap: function(dataview, index, target, record, e, options) {
Ext.Msg.alert('test');
var me = this;


if (record) {


if (!me.details) {
me.details = Ext.create('MyApp.view.MapPanel', {
title: 'Details'
});
}


// set the map
var map = me.details.child('#HotelMap');
map.setMapOptions({
zoom: 17
});
map.setMapCenter({
latitude: record.get('latitude'),
longitude: record.get('longitude')
});


// set the info
// var info = me.details.child('#contact').child('#info');
// info.child('#photo').setData(record.data);
// info.child('#data').setData(record.data);


me.MyList().push(me.details);
}
},


getLocation: function(callback) {
if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
callback(position);
}, function(error) {
// give a warning for error
});
}
},


getMap: function(location, callback) {
var store = Ext.data.Store('Hotels'),
url = 'src/data/hotels.json' +
'&lat=' + location.coords.latitude +
'&long=' + location.coords.longitude;


store.getProxy().setUrl(url);


store.load(function() {
callback(store);
});
}


});


Thank you for an guide