Google Maps API - How to use custom icons with text? - google-maps

I tried the following URL:
http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.7|0|FFAA11|19|_|A
But it only works in Chrome, IE, surprise, does not work, the intention was to display an orange marker icon with a letter A in the middle!
I want to work in Internet Explorer, please someone help me!
I'm using IE 11.
The code is as follows:
var iconURL = ((selecionado != i) ?
'https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=' + String.fromCharCode(65 + l) + '&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1'
:
'http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.7|0|FFAA11|19|_|' + String.fromCharCode(65 + l)
);
marker[i] = new google.maps.Marker({
position: ((i >= latln.length) ? latLonEmpresa : latln[i]),
map: map,
icon: ((titulo[i]) ? iconURL : '')
});

When I use https://chart.apis.google.com/chart?chst=d_map_spin&chld=0.7|0|FFAA11|19|_|A
It redirect to https and get error in IE:
There is a problem connecting securely to this website.
The security certificate presented by this website was issued for a different website's address.
Security certificate problems may indicate an attempt to fool you or intercept any data you send to the server.
Seem the certificate only for www.google.com
If you use: http://www.google.com/chart?chst=d_map_spin&chld=0.7|0|FFAA11|19|_|A seem working

Related

Google Maps fails to open properly

I am updating a cross platform app written in VS2010.
I need to provide driving instructions to the selected location.
I would like my app to open Google Maps (GM) in it’s own window with the best route already determined (as if the operator had opened GM themselves and selected the destination manually).
I have been following GM developer’s instructions but cannot get it to open GM on Android device, I can get it to open GM on iOS but it hangs (all have GM installed & on Wifi). I do not have a Google API key as instructions say it’s not needed.
iOS:
window.open("maps://www.google.com/maps/dir/?api=1&destination=-36.847456,174.830521&travelmode=driving");
Opens GM with last destination but sits on ‘Loading…’ forever
Android:
window.open("https://www.google.com/maps/dir/?api=1&origin=-36.852946,174.763348&destination=-36.847456,174.830521&travelmode=driving");
This opens a web page with recommended route selected, but with a ‘No internet’ banner. AndroidBanner
When I click [Navigate] I am asked if I want to use Google Maps app. When I click [Use the app] I get the application error below which takes me to a black screen so I must restart the app.
As an aside, pasting above url into chrome on Android returns ‘did not match any documents’.
net::ERR_UNKNOWN_URL_SCHEME(intent://maps.app.goo.gl/?link= https://www.google.com/maps/dir//-36.847456,174.830521/#-36.8660726,174.7966977,12z/data%3D!4m2!4m1!3e0!11m1!6b1&apn=com.google.android.apps.maps&amv=914018424&isi=585027354&ibi=com.google.Maps&ius=comgooglemapsurl&utm_campaign=ml_promo&ct=ml-navfab-nlu-o&mt=8&pt=9008#Intent;package=com.google.android.gms;scheme=https;S.browser_fallback_url=https://play.google.com/store/apps/details%3Fid%3Dcom.google.android.apps.maps&pcampaignid%3Dfdl_long&url%3Dhttps://www.google.com/maps/dir//-36.847456,174.830521/#-36.8660726,174.7966977,12z/data%253D!4m2!4m1!3e0!11m1!6b1&min_version%3D914018424;end;)
What am I missing?
Entire function that is called from a toolbar button complete with previous attempts:
mapsSelector: function () {
// helpful url: https://developers.google.com/maps/documentation/urls/ios-urlscheme
var mapURL = "https";
if /* if we're on iOS, open in Apple Maps */
((navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPad") != -1) ||
(navigator.platform.indexOf("iPod") != -1))
mapURL = "maps";
/*
mapURL = mapURL + "://www.google.com/maps/dir/" +
viewModel.Latitude_Now() + "," + viewModel.Longitude_Now() + "/" +
viewModel.Latitude_Destination() + "," + viewModel.Longitude_Destination() + ",17/" +
"am=t";
mapURL = "http://maps.google.com/maps?saddr=-36.91078,174.850896&daddr=-36.7492041,174.6866052";
mapURL = "https://www.google.com/maps/dir/?api=1&saddr=-36.91078,174.850896&daddr=-36.7492041,174.6866052";
mapURL = "https://www.google.com/maps/dir/?api=1&origin=-36.91078,174.850896&destination=-36.7492041,174.6866052&travelmode=driving";
*/
mapURL = "https://www.google.com/maps/dir/?api=1&origin=-36.852946,174.763348&destination=-36.847456,174.830521&travelmode=driving";
//mapURL = "maps://www.google.com/maps/dir/?api=1&destination=-36.847456,174.830521&travelmode=driving";
alert(mapURL);
window.open(mapURL);
}

Iphone is not able to open link to google maps directions

i have this code:
if(navigator.platform.indexOf("iPhone") != -1 || navigator.platform.indexOf("iPod") != -1 || navigator.platform.indexOf("iPad") != -1) {
window.open("https://maps.google.com?saddr=Current+Location&daddr=" + lat + "," + lon);
}
else {
window.open("https://www.google.com/maps/dir/Current+Location/" + lat + "," + lon);
//window.open("https://maps.google.com?saddr=Current+Location&daddr=" + lat + "," + lon);
}
I know that lon and lat have correct values. it works on all desktop browsers and on an android phone i have tested (gives me the directions), but when i window.open runs on the iphone it loads google maps and it says "route not found"..
is this code not supposed to work on and ios device?
You have two methods to embed Google Maps URL in your iOS app.
Using OpenInGoogleMapsController class.
URL Scheme method.
In the first one it is easy to build links to open a map (or display Street View or directions) directly in Google Maps for iOS. Rather than creating URLs by hand, you can create map requests using Objective-C classes and types, so you can take advantage of all the type-checking and code hinting you've come to expect from Xcode.
For Direction follow this code:
GoogleDirectionsDefinition *defn = [[GoogleDirectionsDefinition alloc] init];
defn.startingPoint =
[GoogleDirectionsWaypoint waypointWithQuery:#"221B Baker Street, London"];
defn.destinationPoint = [GoogleDirectionsWaypoint
waypointWithLocation:CLLocationCoordinate2DMake(51.498511, -0.133091)];
defn.travelMode = kGoogleMapsTravelModeBiking;
[[OpenInGoogleMapsController sharedInstance] openDirections:defn];
To launch the Google Maps app for iOS and optionally perform one of the supported functions, use a URL scheme of the following form:
comgooglemaps://?parameters
Use the Display Direction scheme to request and display directions between two locations. You can also specify the transportation mode.
An example URL is below to display transit directions between Google NYC and JFK Airport:
comgooglemaps://?saddr=Google+Inc,+8th+Avenue,+New+York,+NY&daddr=John+F.+Kennedy+International+Airport,+Van+Wyck+Expressway,+Jamaica,+New+York&directionsmode=transit
Hope tat Helps!!

Getting Current Location using only GPS in Cordova/Phonegap

I use the geolocation plugin in Cordova 3.5. And I have coded as follow:
navigator.geolocation.getCurrentPosition(function(pos) {
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
alert("lat : "+lat+" lng : " +lng");
});
I am wandering whether this code can work to get lat lng without Internet connection and GPS on. If not, is there any solution to do so? Thank for your help.
Without Internet connection, there are still sources like Cell ID's, RFID and MAC addresses of devices you are connected to (e. g. WIFI routers, Bluetooth)
The code should work, but you can add a few things (Eventlistener and error alert in case that the position cannot be found):
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(pos) {
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
alert("lat : " + lat + " lng : " + lng);
}
function onError(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
I know that for example the Google location API uses a cache for the latest known location, which can be read out anytime.
I am not sure if Cordova also uses something similar but it could be.
check if geolocation is properly installed or not
restart your phone (silly solution but it works sometimes.I faced it once)
check if your geo permissions & settings are turned on in device
test with this code
options = { enableHighAccuracy: true };
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
If you're using android, try to get the error with eclipse logcat.
On iOS this will always work one way or the other. If the plugin fails, the browser's own Geolocation API will be used. There's some undesired side effects with the fallback though:
The permission dialog that pop's up has the html file's name in the title instead of the app name
Granted permissions will only persist as long as the app is running
On Android it only works if you have set the correct permissions in app/AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
As #jcesarmobile pointed out here Cordova geolocation plugin not getting location from GPS for Android:
They are using HTML5 geolocation implementation instead of native
code. They removed the android java code on release 0.3.7 of the
plugin
### 0.3.7 (Apr 17, 2014)
* CB-6422: [windows8] use cordova/exec/proxy
* CB-6212: [iOS] fix warnings compiled under arm64 64-bit
* CB-5977: [android] Removing the Android Geolocation Code. Mission Accomplished.
* CB-6460: Update license headers
* Add NOTICE file
Hope this helps

IBM Worklight - $("#pagePort").load() not working in Windows Phone 8

I'm using $("#pagePort").load() for navigating between pages in my app, and it's working in Android (both emulator & device) perfectly.
However, my app can't change its page when i tried to run it from Windows Phone 8's emulator.
I have done the following in order to make the changePage functionality work in Windows Phone 8. I suspect this change will make many things "suddenly" work as well.
This change is supposed to be part of the next jQuery Mobile release at some point in time...
Please try it:
open jquery.mobile-1.x.x.js and refactor the code as follows:
- var uri = url ? this.parseUrl( url ) : location,
- hash = this.parseUrl( url || location.href ).hash;
+ var uri = this.parseUrl( url || location.href ),
+ hash = uri.hash;
and:
- return uri.protocol + "//" + uri.host + uri.pathname + uri.search + hash;
+ return uri.protocol + uri.doubleSlash + uri.host + uri.pathname + uri.search + hash;

Google Chrome for IOS 6 ajax file uploading progress event doesn't work

I have a problem with xmlhttprequest file uploading progress event on Google Chrome for ios6. code already work on all desktop browsers and Safari(ios 6).
also there is a problem wiht uploading mov files in google chrome (ios 6), when trying to upload I get file size = 0.
Is there any solution for it ?
this is part of my code
var xhr = new XMLHttpRequest();
var eventSource = xhr.upload;
xhr.addEventListener("load", this.onUploadComplete(uploadInfo));
xhr.addEventListener("error", this.onUploadError(uploadInfo));
xhr.addEventListener("abort", this.onUploadAbort(uploadInfo));
// changing Url for preventing ajax call caching( Android , IOS 6)
var ts = Date.now(), rquery = /\?/, rts = /([?&])_=[^&]*/,
ret = uploadUrl.replace( rts, "$1_=" + ts );
uploadUrl = ret + ( ( ret === uploadUrl ) ? ( rquery.test( uploadUrl ) ? "&" : "?" ) + "_=" + ts : "" );
xhr.open('POST', uploadUrl, true);
eventSource.onprogress = this.onUploadProgress(uploadInfo);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader('X-FILE-NAME', file.name);
xhr.send(file);
This is a known bug for Chrome on iOS, it doesn't support progress update. More details here: https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support
Also, I have reported the bug to the official bug tracker, you can see the latest updates here
UPDATE 2016: It has been fixed!
I have come across the same problem using plupload. However, it only occurred when allowing the user to select multiple files. After turning off this ability, chrome would correctly upload the files.
I have not found a solution to the problem that also allows multiple file upload.