I'm working on an Hybride app using Ionic framework and i just want to know if i can add markers in google map using SQLite.
If yes! can you give me hint please.
And thank you
Looking at google map dev:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
You can probably replace the lat and lng with your variables.
The variables is then retrieved from your SQLite database based on your query.
If you are using SQLite plugin for ionic, do remember to declare the plugin in your controller. You may want to read my other answers in tutorial for SQLite.
Save ,retrieve and upload data to a remote server---(AngularJs / Ionic)
Related
I'm wondering if there's a way to build a map in Here XYZ Studio but then get said map's GeoJSON via one of the Here APIs.
HERE Maps API for Javascript can render your XYZ Studio spaces directly:
// Assumption: the platform is instantiated
var service = platform.getXYZService({
token: 'authentication_token_goes_here'
}),
provider = new H.service.xyz.Provider(service, 'space_id_goes_here');
map.addLayer(new H.map.layer.TileLayer(provider));
doc: https://developer.here.com/documentation/maps/3.1.14.0/api_reference/H.service.xyz.Provider.html
It also can render geojson features:
var reader = new H.data.geojson.Reader('/path/to/geojson/file.json');
reader.parse();
// Assumption: map already exists
map.addLayer(reader.getLayer());
doc: https://developer.here.com/documentation/maps/3.1.14.0/api_reference/H.data.geojson.Reader.html
Here is simple jsfiddle example of loading geojson features (country shapes):
https://jsfiddle.net/vhwfg8t4/
I have been rendering KML files in the google maps by the geoXML library by the following way.
var geoXml = new geoXML3.parser({
map : map,
singleInfoWindow : true
});
geoXml.parse('http://DomainName/GeoSystem/redrawKML');
I came to know by the following way we could render KML files in the google maps.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
ctaLayer.setMap(map);
These two approach made me to ask following, (If it is stupid, I will update it in appropriate way)
Which is faster to render KML Files in google maps and why ?
Which is providing good support for handling events (mouse click, Key press, etc.)
Which is providing best support to validate the KML file which is being rendered from Server.
geoXML3 was created when maps API v3 did not have native KML support yet. It makes use of other API v3 objects like google.maps.Polygon, of which you can use all it event possibilities.
google.maps.KmlLayer support of events is limited. (only mouse click). There is also a limit of number of KML files which can be displayed on a map: https://developers.google.com/kml/documentation/mapsSupport
the native KML support is probably the most easy one to implement. geoXML3 however gives more possibilities.
both do the same job to validate the KML file
I'm using the google-maps-utility-library-v3 to incorporate a Google Earth API view to a Google Maps API v3 implementation. Those Google Maps API v3 / Earth API utilities have been written by user jlivni as far as I can tell, the availability of which code has helped me greatly thus far.
(very rough working prototype of my implementation is here)
The problem I have is that I want to default (on page load) to the Google Earth view, rather than (as in the prototype above) one of the Maps API v3 standard views.
I have looked at lines 81, 131 and 133 of the (uncompiled?) googleearth.js at the above link (under src) and tried the following when setting the Maps API options within my JourneyImmersionInitialiseMapLoadGPXAnimate.js ...
var myOptions = {
zoom: 18,
center: arr_lat_lon[currentTrk][currentTrkseg][0],
scaleControl: true,
tilt: 45,
mapTypeId: earthMapType,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true
}
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
... but get ...
ReferenceError: earthMapType is not defined
Additionally I've tried ...
mapTypeId: GoogleEarth.earthMapType,
... which results in a grey map canvas with no map type options on the top right. Once I've selected the Earth view from the page I can then change between the standard Earth API map types at the console in Firebug using ...
earth.getInstance().getOptions().setMapType(earth.getInstance().MAP_TYPE_EARTH)
... or ...
earth.getInstance().getOptions().setMapType(earth.getInstance().MAP_TYPE_SKY)
... but again, use of earthMapType or GoogleEarth.earthMapType in place of the last element results in an error at the Firebug console, this time ...
Error: Error calling method on NPObject!
Any help would be greatly appreciated.
Thanks in advance
(as I'm a newbie I can't provide more than two links in this post but wanted to add that I have looked at stackoverflow.com/questions/3039250/google-earth-integrated-with-google-maps-api-v3)
This library doesn't have a public method to switch programmatically, and if you try to do it before all the setup is in place, it will fail. Ideally there would be a callback after instantiating your GoogleEarth object, but lacking that you can hack around the issue by using the private showEarth_() method on the uncompiled JS.
Noting you have to wait an arbitrary amount of time before the plugin is ready, something like this should generally do the trick:
googleEarth = new GoogleEarth(map);
setTimeout('googleEarth.showEarth_();',1000);
This is all pretty hackish, so please file a feature request on the issue tracker to add in a supported method for switching to the Earth type programmatically.
How do we add the weather overlay option to a Google map, just like on Google my maps?
I've searched for it, but i can't find the answer.
Do i have to call a weather web service?
You can display the WeatherLayerdev-guide on your map by taking two steps:
First, load the WeatherLayer library by adding the libraries parameter to the URL you use to load the map:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?libraries=weather&sensor=false">
</script>
Then, you must create an instance of the google.maps.weather.WeatherLayerapi-doc class, passing any options in a WeatherLayerOptionsapi-doc object, and attach the WeatherLayer to the map:
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
In addition to the WeatherLayer, there is also a separate google.maps.weather.CloudLayerapi-doc class that you may create in a similar way:
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
There is no separate library that you must load to use the CloudLayer; adding the libraries=weather parameter to the URL that loads the map makes both the WeatherLayer and the CloudLayer available on your map. There as a Google Maps JavaScript API v3 Example: Weather Layer, that shows the usage of both layers.
I have got same trouble when I tried to use Google map apiv3 with weather layer. But luckily, I found this site http://code.google.com/p/gmaps-samples-v3/ that provides all Google map api v3 samples and they are worked. Hope this help.
Cuong Vo
I recently created a store locator using the "Google Maps API Store Locator" example.
Now I'm trying to implement the MarkerClusterer Library so that I can display a large single marker instead of multiple markers when users are zoomed out at a certain distance.
When I add the output code:
...
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();
var markerCluster = new MarkerClusterer(map, markers);
...
I get the following error:
marker.getLatLng is not a function
Has anyone tried to implement this piece in the past?
I think you're trying to use some Google Maps v2 or possibly v1 code with the v3 api, hence you get the error 'getLatLng is not a function'..
Try the v3 marker cluster library:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html
Here's an example:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/examples/advanced_example.html?