PDA

View Full Version : How to set a center for a map



Jpw48
25 Aug 2011, 3:41 AM
Hi, I've been quietly struggling with this for weeks now, browsing countless tutorials and threads on this forum for help, but nothing seems to be working for me.
I've made an application 5 tabs, and each card is a separate file. My map card works fine, I can zoom to different levels, but I cannot find a way to center it onto a different location. Any help would be really appreciated, thank you.

This is my code




Tregenna.views.Mapcard = Ext.extend(Ext.Panel, {
title: "Map",
iconCls: "maps",
html: 'Map',
style: "background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(211,221,227)), color-stop(0.67, rgb(19,68,101)) );",












dockedItems:[

{
xtype:'box',
style: "overflow: hidden; position: relative; display: block; margin-left: 10px; margin-right: 10px; margin-top: 0px; margin-bottom: 0px; padding: 0px 0px 0px 0px; list-style: none;",
html: '',
height:'7%',
dock:'top',
},

{
xtype:'map',
mapOptions:{
zoom: 8,
},
title:'map',

style: "background-color: font-size: 9pt; overflow: hidden; position: relative; display: block; margin-left: 7px; margin-right: 7px; margin-top: 10px; margin-bottom: 0px; padding: 5px 5px 5px 5px; list-style: none;",
height:'82%',
dock:'top',

},

],


});


Ext.reg('mapcard', Tregenna.views.Mapcard);

NickT
25 Aug 2011, 4:19 AM
you can provide a mapOptions config property when you declare your map. within this you can provide a center property, for example (assuming you provide the _lat and _lng vars with the values you want to use to center the map...


{
xtype:'map',
mapOptions:{ zoom: 8,center: new google.maps.LatLng(_lat, _lng) },
title:'map',
style: "background-color: font-size: 9pt; overflow: hidden; position: relative; display: block; margin-left: 7px; margin-right: 7px; margin-top: 10px; margin-bottom: 0px; padding: 5px 5px 5px 5px; list-style: none;",
height:'82%',
dock:'top',
}

Jpw48
25 Aug 2011, 4:26 AM
Thanks for your quick reply, I've just tried that but the debugger in Chrome is saying that
Uncaught ReferenceError: google is not defined

Any ideas? When I try to view it on the iPhone simulator, nothing loads at all because its obviously getting stuck at this point

NickT
25 Aug 2011, 4:30 AM
in your html page, add in the v3 (or v2) google maps javascript


<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=true"></script>





Here is the api documentation for v3

http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions

Jpw48
25 Aug 2011, 4:39 AM
Thank you again, but I've had that file linked all along, but its still throwing up the error. Is there another place I could define the mapOptions do you think?

Jpw48
25 Aug 2011, 4:40 AM
I've just realised I linked to the Google Maps API at the end of my card declarations, so it loaded the map page before it loaded the API. Switched them around ant it works a treat! Thank you very much for your help, its really appreciated :)