PDA

View Full Version : Google maps API is requied



anpegar
18 Jan 2011, 7:00 AM
Hi folk, why occurs this error?

Thank's in advanced.

24337



<html>
<head>
<meta charset="utf-8">
<title>GeoTweets</title>
<!-- Sencha Touch CSS -->
<link rel="stylesheet" href="/sencha-touch-1.0.1a/resources/css/sencha-touch.css" type="text/css">

<!-- Google Maps JS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- Sencha Touch JS -->
<script type="text/javascript" src="/sencha-touch-1.0.1a/sencha-touch-debug.js"></script>

<!-- Application JS -->
<script type="text/javascript" src="test.js"></script>

</head>
<body onload="testeo();">hola</body>
</html>


test.js code:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var timeline = new Ext.Component({
title: 'Timeline',
cls: 'timeline',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar"><img src="{profile_image_url}" /></div>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<p>{text}</p>',
'</div>',
'</div>',
'</tpl>'
]
});
var map = new Ext.Map({
title: 'Map',
getLocation: true,
mapOptions: {
zoom: 12
}
});
var panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
items: [map, timeline]
});
var refresh = function() {
var coords = map.geo.coords;
Ext.util.JSONP.request({
url: 'http://search.twitter.com/search.json',
callbackKey: 'callback',
params: {
geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
rpp: 30
},
callback: function(data) {
data = data.results;
// Update the tweets in timeline
timeline.update(data);
// Add points to the map
for (var i = 0, ln = data.length; i < ln; i++) {
var tweet = data[i];
// If the tweet is geo-tagged, use that to display marker
if (tweet.geo && tweet.geo.coordinates) {
var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
addMarker(tweet, position);
}
}
}
});
};
// These are all Google Maps APIs
var addMarker = function(tweet, position) {
var marker = new google.maps.Marker({
map: map.map,
position: position
});
};
map.geo.on('update', refresh);
var tabBar = panel.getTabBar();
tabBar.addDocked({
xtype: 'button',
ui: 'mask',
iconCls: 'refresh',
dock: 'right',
stretch: false,
align: 'center',
handler: refresh
});
}
});

jep
18 Jan 2011, 8:58 AM
Not sure why, but the google maps isn't loading, even though you have the right script tag for it. It might help if you post your code with a post your code in a way that preserves the whitespace. It's pretty impossible for us to read it right now.

anpegar
18 Jan 2011, 9:13 AM
jep, thank's for your answer, I've modified the code, now is more readable.

jep
18 Jan 2011, 9:15 AM
Thanks, much better!

Well, I can tell you this - I have my sencha library script tag before my google maps one. Really, the intuitive thing would be the other way around. But I can tell you this works right for me. Give that a shot.

Edit: Sorry, I just glanced at mine and mistook the sencha CSS link for the sencha script tag. That's not the problem. I'll keep looking.

jep
18 Jan 2011, 9:24 AM
Okay, copied down your code and tried it and I did not get the complaint about map api not being found. It also showed the map and everything seemed fine. I tried this in Chrome 8.0.552.237 as well as Safari 5.0.3 XP.

Looking at the error log, the only errors I got were:


test.html:17 ReferenceError: Can't find variable: testeo
test.js:67 TypeError: Result of expression 'map.geo' [null] is not an object.


Perhaps a silly question, but are you loading this from a webserver or by opening the file directly in your browser?

anpegar
18 Jan 2011, 11:35 PM
thank's for your interest.
In my PC i have Windows 7 and Apache Tomcat 6, i run this from my public ip (https://95.23.12.208:6443), in my web server the port 6443 is open.

If i run this over my private ip (192.168.1.128) this works fine.

jep
19 Jan 2011, 7:10 AM
Is that public server up and listening now? I can't seem to get it to respond at all.

I think it's quite possible you're running into a routing or firewalling issue.

anpegar
19 Jan 2011, 7:31 AM
No, the server is the PC in my house and now is off, now i'm at work but when i get home i turn it and you notice.
thank's for all.

anpegar
20 Jan 2011, 6:43 AM
Hi jep, now the web server is listening, you can test this url http://95.23.12.208:8085/geotweets/ ?

jep
20 Jan 2011, 7:21 AM
Worked fine for me in both Safari 5.0.3 XP and Chrome 8.0.552.237 XP. Don't know what to tell you. I think you're just having a routing issue between your private and public ips. I wouldn't worry about it, as it's working fine for you on testing on your private ip, and it's working fine for me using it from your public ip.

anpegar
20 Jan 2011, 8:52 AM
Solved !! The problem was the proxy of my company.
Thank you very much for your help and patience.

jep
20 Jan 2011, 8:52 AM
Anytime.

Well, when I'm not up to my neck in deadlines. :D