I am using Google Map and want the position to RIGHT_CENTER. But it is not working for me. Please help me to solve this. Thank you.
Code:
var contact = { "lat": "****", "lon": "***" }; // Change a map coordinate here!
try {
var mapContainer = $('#map');
mapContainer.gmap3({
action: 'addMarker',
latLng: [contact.lat, contact.lon],
map: {
center: [contact.lat, contact.lon],
zoom: 17,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.RIGHT_CENTER // This is not working
},
},
}, { action: 'setOptions', args: [{ scrollwheel: true }] } ); }
Looks like you are using gmap3 jquery plugin. You should specify all map options in options property there (I guess other options dont work as well), see here.
Like this:
var mapContainer = $('#map');
mapContainer.gmap3({
marker:{
latLng: [45,-10],
},
map: {
options: {
center: [45,-10],
zoom: 5,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.RIGHT_CENTER // This is not working
}
}
},
}, { action: 'setOptions', args: [{ scrollwheel: true }] } );
see demo
Related
Below is a standard code taken from Google Map api V3 documentation. If you chnage the polygon options to editable and draggable, when you hover/click on the vertices of the polygon, you get the following error:
Uncaught TypeError: Cannot read property '__e3_' of null
The error is inconsistent in that it appears on an ad-hoc basis.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
},
markerOptions: { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' },
polygonOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: true,
editable: true,
draggable:true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
drawingManager.setDrawingMode(null);
});
}
initMap();
Is this a bug in the api ?
Would appreciate any input on this matter.
Many thanks.
Now I have my store: stuStore set up which contains some mock-up data.
I have another page which is a Google Map.
Student data structure: {name, geolocation,value, etc....}
I would like to display each of students info based on their locations which is inside of stuStore onto the google Map.
Here is the code:
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
fullscreen: true,
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.Map',
'Ext.Panel',
'Ext.tab.*',
'Ext.*'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'myapp',
iconCls:'maps',
xtype: 'map',
useCurrentLocation: true,
store: 'myapp.store.stuStore'
}
How can I do it?
Update 1
var mapdemo = Ext.create('Ext.Map', {
mapOptions: {
center: new google.maps.LatLng(-37.73228, 144.86900), //nearby San Fran
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
title: 'MyApp',
iconCls: 'maps',
fullscreen: true,
xtype: 'map',
id: 'mainMap',
useCurrentLocation: false,
listeners: {
maprender: function (comp, googleMap) {
var store, latlng, marker;
store = Ext.getStore('myapp.store.stuStore');
store.each(function (record, index, length) {
latlng = new google.maps.LatLng(record.get('Lat'), record.get('Lng'));
marker = new google.maps.Marker({
position: latlng,
map: this
});
});
}
}
}),
infowindow = new google.maps.InfoWindow({
content: 'Sencha HQ'
});
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
fullscreen: true,
config: {
tabBarPosition: 'bottom',
items: [mapdemo],
}
});
This is my updated code in view\Main.js
But I don't get any markers and it keeps throwing an error:
Uncaught TypeError: Cannot call method 'each' of undefined
Incidentally, the icon on the toolbar which is docked at bottom of the screen is gone as well.
What can I try next?
You can create markers based on store records by looping through them in the maprender event callback like this:
Ext.define('myapp.controller.MapController', {
extend: 'Ext.app.Controller',
config: {
refs: {
mapComponent: 'main map'
},
control: {
mapComponent: {
maprender: 'onMaprender',
}
}
},
onMaprender: function(mapComponent, googleMap) {
var store, latLng, marker;
// Get store
store = Ext.getStore('myapp.store.stuStore')
// On each store record
store.each(function(record, index, length) {
// Get position
latLng = new google.maps.LatLng(record.get('lat'), record.get('lng'));
// Create marker
marker = new google.maps.Marker({
position: latLng,
map: googleMap
});
});
}
});
Have a look at this Sencha Fiddle I put together.
I have implemented the map functionality in my sencha based application. The map is showing but cant able to zoom in or zoom out & can't be able to move in other direction. It showa like static in the image.
But I want to show the map as like the following
Here is my code
var mapapnel = Ext.create('Ext.Panel', {
id: 'mapapnel',
layout:'card',
height: '100%',
width: '100%',
items: [
{
xtype: 'toolbar',
ui:'light',
docked: 'top',
title: 'Find location',
items: [{
text: 'Back',
ui: 'back',
handler: function() {
Ext.getCmp('homepnl').setActiveItem(1);
}
},{
xtype:'spacer'
}
]
},
{
xtype:'map',
useCurrentLocation:false,
mapOptions: {
zoom: 15,
zoomControl : true,
center: new google.maps.LatLng(11.0183, 76.9725),
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
})
what change required in my code add the functionalites zoom in & zoom out.
Here my answer one more time:
It look likes a layout problem, the map should be inside a container with layout 'fit'.
Hi I am implementing google maps in sencha touch as suggested here:
google maps implementation in sencha touch 2 (the MVC way)
However, when the map appears, it first displays a default location (somewhere in United States) and then re-renders again to show the map according to my configuration. How can I avoid this?
Ext.define('App.view.Map', {
extend: 'Ext.Map',
xtype: 'map',
useCurrentLocation: false,
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
styleHtmlContent: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Location'
}
},
mapOptions: {
center: new google.maps.LatLng(<value>, <value>),
disableDefaultUI: true
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});
You defined map view and extended Ext.Map, so that view becomes map and when you give xtype to your view, It should not be predefined xtype like map, panel, button, etc..
You should learn Ext class system and try this code.
Ext.define('myapp.view.Map', {
extend: 'Ext.Map',
xtype: 'mymap',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Location'
}],
mapOptions: {
center: new google.maps.LatLng(<value>, <value>),
disableDefaultUI: true
}
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});
You can set the starting location by adding a "center" option to the map's "mapOptions" config.
{
xtype: 'map',
mapOptions: {
center: new google.maps.LatLng(-34.397, 150.644)
}
}
You can just override the Ext.Map class and add your own message.
Ext.define('MyApp.overrides.Map', {
constructor: function() {
this.callParent(arguments);
// this.element.setVisibilityMode(Ext.Element.OFFSETS);
if (!(window.google || {}).maps) {
// do your own thing here
}
}
});
I've created a new sencha app with the sencha-cmd. I'm a bit new to this. So i've tried to create a map:
{
title: 'Map',
iconCls: 'locate',
layout: 'card',
useCurrentLocation: false,
fullscreen: false,
id: 'locationmap',
mapOptions: {
zoom: 12,
center : new google.maps.LatLng(37.381592, -122.135672),
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.DEFAULT
}
},
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'map'
}
]
}
I've included the necessary google maps api files, and also required Ext.Map
However the map isn't centering on 37.381592, -122.135672, its centering elsewhere. How can I fix this?
Additionally, how can I access the maps object? So I can call stuff like .getCenter()
Not sure on the centering, but you could do it after the fact with:
theView.setMapCenter({latitude: 37.381592, longitude: -122.135672});
As for getting the element, you can simply call:
theView.getMap();
This is all coming from the Sencha Touch 2 docs, FYI. I'm interested to see how it works out, I'll be implementing a map in my new app soon.
EDIT:
Looking at it more closely, shouldn't your mapOptions parameter be on the xtype: 'map' item?
...
{
xtype: 'map',
useCurrentLocation: false,
mapOptions: {
zoom: 12,
center : new google.maps.LatLng(37.381592, -122.135672),
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
...