Results 1 to 9 of 9

Thread: Grid / Google Maps question

  1. #1

    Default Grid / Google Maps question

    I have a paged grid next to a Google Map. The map shows points for the records currently showing in the grid. I want users to be able to click on a field in the grid and display the Google Map info window for that record. But the myclick function that is supposed to open the info window shows up as not defined in Firebug. I'm sure this is painfully simple for someone who knows what they're doing, but my understanding of Javascript and Ext JS is weak and I can't seem to find an answer digging through the forums and the docs. Any clues in the form of code snippets would help. Here's my current code:

    Code:
    Ext.onReady(function(){
    
    	var ds = new Ext.data.Store({
    		proxy: new Ext.data.ScriptTagProxy({
    			url: 'http://localhost/business/new/revenue-json.php'
    		}),
    
    		reader: new Ext.data.JsonReader({
    			root: 'results',
    			totalProperty: 'total',
    			id: 'ID'
    		}, [
    			'BusinessType', 'LegalName1', 'BusinessAddressLine3', 'City','State', 'ZipCode', 'Lat', 'Lon', 'ID'
    		]),
    
    		remoteSort: true
    	});
    
    	function renderMapLink(value, p, record){
    		return String.format(
    				 '<a href="#" onClick="myclick({1});">{0}</a>',
    				value, record.data.ID);
    	}
    	
    
    	var cm = new Ext.grid.ColumnModel([{
    		header: "Business Type",
    		dataIndex: 'BusinessType',
    		width: 50,
    		hidden: true
    	},{
    		header: "Legal Name",
    		dataIndex: 'LegalName1',
    		width: 100,
    		renderer: renderMapLink
    	},{
    		header: "Address",
    		dataIndex: 'BusinessAddressLine3',
    		width: 35,
    		align: 'left',
    		hidden: true
    	},{
    		header: "City",
    		dataIndex: 'City',
    		width: 35,
    		hidden: true
    	},{
    		header: "State",
    		dataIndex: 'State',
    		width: 35,
    		hidden: true
    	},{
    		header: "ZIP",
    		dataIndex: 'ZipCode',
    		width: 25
    	}]);
    
    	cm.defaultSortable = true;
    
    	var grid = new Ext.grid.GridPanel({
    		el:'search-panel',
    		width:400,
    		height:500,
    		title:'New businesses',
    		store: ds,
    		cm: cm,
    		trackMouseOver:false,
    		sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
    		loadMask: true,
    		viewConfig: {
    			forceFit:true,
    			enableRowBody:true,
    			showPreview:true
    		},
    		tbar: [
    			'Search by name or ZIP code: ', ' ',
    			new Ext.app.SearchField({
    				store: ds,
    				width:150
    			})
    		],
    		bbar: new Ext.PagingToolbar({
    			pageSize: 20,
    			store: ds,
    			displayInfo: true,
    			displayMsg: '{0}-{1} of {2} records',
    			emptyMsg: "No records to display"
    		})
    	});
    	
    	if (GBrowserIsCompatible()) {
    
    		function createTabbedMarker(point,html1,html2,label1,label2) {
    			var marker = new GMarker(point, icon);
    			GEvent.addListener(marker, "click", function() {
    				marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
    			});
    			return marker;
    		}
    			
    		// To open info window when click on link in grid
    		function myclick(i) {
    			GEvent.trigger(gmarkers[i], "click");
    		}
    
    
    		var map = new GMap2(document.getElementById("map"));
    		map.addControl(new GSmallMapControl());
    		// map.addControl(new GMapTypeControl());
    		map.setCenter(new GLatLng(38.20,-85.690), 9);
    
    		var icon;
    		var gmarkers = [];
    
    		var bizIcon = new GIcon();
    		bizIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    		bizIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    		bizIcon.iconSize = new GSize(12, 20);
    		bizIcon.shadowSize = new GSize(22, 20);
    		bizIcon.iconAnchor = new GPoint(6, 20);
    		bizIcon.infoWindowAnchor = new GPoint(5, 1);
    		icon = bizIcon;
    	}
    	else {
    		alert("Sorry, your browser is not compatible with Google Maps");
    	}
    
    	grid.render();
    	
    	ds.load({params:{start:0, limit:20}});
    
    	ds.on('datachanged', function() {
    
    		map.clearOverlays();
    		ds.each(function(r){
    
    			var point = new GLatLng(r.get('Lat'),r.get('Lon'));
    			var html1 = "<div style='width:150px' align='left'><b>" + r.get('LegalName1') + "</b><br/></div>";
    			var html2 = "<div style='width:150px' align='left'><b>" + r.get('BusinessAddressLine3') + "</b><br/></div>";
    			var marker = createTabbedMarker(point,html1,html2,"Name","Address", icon);
    			gmarkers[r.get('ID')] = marker;
    			map.addOverlay(marker);
    
    		}); // end ds.each
    	});
    });

  2. #2

    Default

    Answering my own question (apologies for posting a 2.x question in a 1.x forum). This seems to work. Don't need the specially rendered column adding the URL and onclick event.

    Code:
    function myclick(){
    		var selectionModel = grid.getSelectionModel();
    		var record = selectionModel.getSelected();
    		GEvent.trigger(gmarkers[record.data.ID], "click");
    	}
    
    grid.on("click", myclick);

  3. #3

    Default

    Slight adjustment. Should be
    Code:
    grid.on("rowclick", myclick);
    instead of just "click." With "click" the function also applies to the column headers, which screws up sorting.

  4. #4
    Sencha User
    Join Date
    Jun 2007
    Location
    Bourges (France)
    Posts
    106

    Default

    Can you give us an url to thow us your example ?

    I'm interesting by that.

  5. #5

  6. #6
    Ext User
    Join Date
    May 2007
    Posts
    69

    Default google map question

    did you happen to have problems mapping around 25 points of interest using google? The 620 error code appears to happen often to many when trying to map many points of interests within a very short period of seconds. If you did run into this problem, how did you solve?

    Thanks!

  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    69

    Default Enhancement Idea

    BTW...great job with this. You may want to consider having the map change based on going through the rows with the keyboard arrows. Unfortunately, I'm not certain how to do this but thought it would be a nice touch (since I initially tried to use the arrow keys after i clicked into a row) Perhap someone else can chime in how to accomplish this!


    Best of Luck!

  8. #8

    Default

    Thanks for the suggestion! I may give that a try when I get a chance. I geocoded all the points in advance with a geocoder (http://search.cpan.org/~sderle/Geo-Coder-US/US.pm), so it's not using Google's geocoder each time, thus no 620 errors.

  9. #9

    Default

    Do you know how to change icons for the different markers?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •