I am using Ionic 2.2.3 for building hybrid mobile app. I am using Cordova Google Map plugin for plotting some points on google map. Same code base is working for all android devices fine but when I try to plot polyline in iOS(any device), the app gets crashed.
I am getting the points in below format -
{"lat":22.51,"lng":88.26},{"lat":22.549092,"lng":88.284892}
and then add the points to map -
map.addPolyline({
'points': points,
'color': "#DAA520",
'width': 6,
'name': '<line Name>'
}, function (polyline) {
polyline.on(plugin.google.maps.event.POLYLINE_CLICK, function (latlng) {
map.addMarker({
position: latlng,
}, function (marker) {
//some code to show the line details when clicked
});
});
});
When I run the same code in emulator, there are no issues and app runs fine. I guess there is some memory issue and I am struggling with same.
Yes. After checking some points I found out that it is breaking after few 100 points. So I am querying now some 100 points and rest based on user's query.
I'm wondering if there are anyone out that have implemented Google Maps V2 and Baidu Maps in the same version; because GM doesn't work as intended in China?
Or should I split the project into two branches instead? However it would be nice to skip having two branches to maintain.
My solution for this was to implement GM as usual, however if the user has China set (via settings) static maps is to be used, BUT the static map is fetched from Baidu instead of google.
staticUrl = "http://api.map.baidu.com/staticimage?center="
+ location.getLongitude() + "," + location.getLatitude()
+ "&width=" + width + "&height=" + width + "&zoom=15"
+ "&markers=" + location.getLongitude() + "," + location.getLatitude();
Result of https://api.map.baidu.com/staticimage?center=121,31&width=300&height=300&zoom=15:
This method is NOT recommended if trying to implement a real map solution.
Since I have different locations only used by different countries, this solution could be used.
So, that is how I solved it. Hope someone finds this helpful.
Also, I have found that if you use http://ditu.google.cn while in China, it does work.
When using on-line maps in China for your application, whether it's Google Maps or Baidu, there is a transformation of latitude and longitude for legal reasons.
The satellite view in Google Maps uses "Earth" (WGS-84) coordinates. The map view of GMaps in China uses "Mars" coordinates (GCJ-02), and there is code to convert between the two. Baidu maps use the "Bearpaw" coordinates, with a different offset. The Baidu Map API has a demo converting between Google's coordinates and its own systems.
In China, GPS, like everything, has an extra layer of complication :)
If you have built this app, please post the details. Having an English interface to Baidu maps would be great.
You can use both Google Maps and Baidu Maps side by side, but make sure to convert from the WGS-84 coordinates (used by most of the world) to Baidu's coordinates (BD-09, different from China's GCJ-02). Here's some code that does that, based on an example from the Baidu Maps API:
// Google coordinates
var gPoint = new BMap.Point(121.4914, 31.2423); // lon, lat of the Bund Museum in Shanghai - https://www.google.com/maps/#31.2423,121.4914,19z
// gPoint = new BMap.Point(-122.0851053, 37.4219593); // lon, lat of the Googleplex (no Baidu map data but zooms out in Mountain View)
var labelOffset = { offset: new BMap.Size(20, -10) };
// Initialize map
var map = new BMap.Map('allmap');
map.centerAndZoom(gPoint, 15);
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // add scale
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl()); // map type control: street/satellite/2.5D
map.enableScrollWheelZoom(); // mouse wheel scroll is disabled by default
// Add Google marker and label
var markerG = new BMap.Marker(gPoint);
map.addOverlay(markerG);
markerG.setLabel(new BMap.Label('Google coordinates marker appears<br/>at incorrect location on Baidu Map', labelOffset));
// Coordinate conversion ... GCJ-02 coordinates ... Baidu coordinates
BMap.Convertor.translate(gPoint, 2, function (point) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(new BMap.Label('Converted to Baidu coordinates:<br/>' +
point.lng + ', ' +
point.lat +
'<br/>(note the offset of ' + (map.getDistance(gPoint, point)).toFixed(2) + ' meters)',
labelOffset));
map.addOverlay(new BMap.Polyline([gPoint, point])); // draw a line between points
});
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gd0GyxGUxSCoAbmdyQBhyhrZ"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<div id="allmap"></div>
If the snippet above doesn't work due to the way StackOverflow sandboxes scripts, try the JSbin demo of Google -> Baidu coordinates conversion instead.
If you must perform the conversion offline, check out the evil transform project on GitHub.
It's unclear though what coordinate types browsers localized in Chinese will return via the navigator.geolocation API. I've made a test app for that and posted the question at
Showing navigator.geolocation.getCurrentPosition in Baidu Maps.
Further reading:
What causes the GPS shift in China?
Restrictions on geographic data in China
PROBABLY a bit late to the party, but I accidentally stumbled across something recently which might help you.
I tried baidu maps and it was shockingly difficult to setup and terrible to use so I had a look around and suddenly, google maps worked for me without a vpn!
I realised that the old google china server was still active and if you try:
maps.google.cn
you'll find that creating an iframe using the google.cn address works!
Try to use this way with Google coordinate
http://api.map.baidu.com/marker?location=39.916979519873,116.41004950566&output=html
If your server can access GM without issues (eg. your hosting is not in China mainland or it is but has uncensored connection), why don't you have server do loading data from GM and route it to user instead? We did that for few projects in the past, worked like a charm.
p.s. you could make php pull static map from GM for requested long/lat, store it into temp file on server, then pass back url to the temp file. From user's perspective they would be looking at (static) GM.
p.p.s. If you need user to be able to use GM's UI (do pan/zoom) then you'd need a bit more complex php that would alter all JS loaded from GM so all data would still be requested to your server which would then get maps - so basically to avoid any requests from client machine to be sent to GM server, but all to be sent to yours instead.
I can't seem to find a common answer anywhere. It seems like there isn't a way to support both Android and iPhone for links opening in their native maps application with their current location set.
From what I've been able to find, the iPhone does it like this:
saddr=Current%20Location
and android you can just leave "saddr" blank. I'm not even thinking of BlackBerries yet. I suppose there is probably a way to do this with JavaScript, but it don't think it should be that complicated.
For now what I'm doing is using html5 geolocation to grab the latitude and longitude instead relying on the OS to interpret the current location.
HTML:
<a id="directions" class="callout" href="http://maps.google.com/maps?daddr=address">
JavaScript:
$('#directions').bind('click', function (e) {
var href = $(this).attr('href');
if (navigator.geolocation) {
e.preventDefault();
navigator.geolocation.getCurrentPosition(function (position) {
geoLink(position.coords.latitude, position.coords.longitude, href);
});
}
function geoLink(lat, log, href) {
var location = href + '&saddr=' + lat + ',' + log;
window.location.href = location;
}
This is a question about Mapquest Android Maps API.
Does anyone know that the createRoute method is supporting lat/Lng or not in mapquest?
public void createRoute(java.lang.String from, java.lang.String to)
The document I found here:
I have read the "Location Format Documentation" : link
It seems that createRoute method supports lat/Lng.
I tried to input lat/Lng a whole day but it returns me an error message only:
Unable to create route.
Error: -1"
Message:[null]
Are you still seeing this error message? The MapQuest Android Maps API does support lat/lng input for routing. Here is a sample request that uses lat/lng inputs:
private void displayRoute() {
RouteManager routeManager= new
RouteManager( this );
routeManager.setMapView( map );
routeManager.createRoute( "{latLng:{lat:37.765007,lng:-122.239937}}" , "Fremont, CA" );
}
Also, The MapQuest Developer Network has an Android Maps API forum. It is also a good resource to check!
You can write like this
RouteManager routeManager = new RouteManager(this);
routeManager.setMapView(map);
routeManager.createRoute("37.002004,35.322998", "36.802687,34.632812");
or like this
RouteManager routeManager = new RouteManager(this);
routeManager.setMapView(map);
routeManager.createRoute("Any City Name", "Any City Name");
MapQuest is supporting this types
I would like to know that how load custom map by using google map api. Is that possible? I want to develop a kind of map app for stand alone mobile device which doesn't connect the internet. Could u please give me some advices?
Thanks
Probably already figured it out or gave up. But I thought I would post my solution in case someone else stumbles across this.
My solution was to go to the custom map and download the KML data for the map (set it to be a feed). You will get a file with a feed now you can add a KML layer with that feed, like so:
function init() {
const initialPosition = { lat: 55.085868, lng: 8.570730 };
const map = new google.maps.Map( document.getElementById('map'), {
center: initialPosition,
zoom: 12
});
const marker = new google.maps.Marker({ map, position: initialPosition });
var georssLayer = new google.maps.KmlLayer({
url: 'YOUR GOOGLE KML FEED URL GOES HERE',
preserveViewport: true, // teels the api to use the initial poz and soom
map: map
});
georssLayer.setMap(map);
}
google documentation can be found here: https://developers.google.com/maps/documentation/javascript/kmllayer
hope it helps someone