Oreilly Map Demo Modification for Driving Directions

[ronaldoneal]

Using the Oreilly map demo to map a location, I am trying to modify the Location.js in the app\view directory it to do driving directions to the location. The error is on this line: directionsRenderer.setMap(map);

After running the following code, I receive the error message "Uncaught error: Invalid value for property <map>", [object] Object

Ext.define('HCofC.view.Location', {


extend: 'Ext.Container',
requires: 'Ext.Map',


xtype: 'location',


config: {


title: 'Location',
iconCls: 'locate',


layout: 'fit',


items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Location'
}
]
},


initialize: function() {

var directionRenderer;
var directionsService = new google.maps.DirectionsService();
var map;

var position = new google.maps.LatLng(HCofC.app.mapCenter[0], HCofC.app.mapCenter[1]),
infoWindow = new google.maps.InfoWindow({ content: HCofC.app.mapText }),
map, marker;


this.callParent();


map = this.add({
xtype: 'map',
mapOptions: {
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
});


directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);

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


google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
}
});

[mitchellsimoens]

Just like when you add your marker you used map.getMap(), you need to use that reference as that is the google map instance. You are trying it on the ST2 map component.

[ronaldoneal]

It worked. You can close this one.