Google Map Issue - Ionic 2 - google-maps

Google map shows in the browser but when I run command
ionic run android
it build successfully and launch the app but everything works fine except Google map there are no errors in chrome://inspect it just says DEVICE READY FIRED AFTER 630 ms but no error for google map. I did register app on console.developers.google.com got the key and using it in www/index.html in the head but still no changes. Please help thank you.
home.ts (Map function is inside of this file)
// Get the current location
Geolocation.getCurrentPosition().then((position) => {
// Set latitude and longtitude variable
this.lat = position.coords.latitude;
this.long = position.coords.longitude;
// This function will get the name of the city where user is located
this.getCityName(this.lat, this.long);
// this function sets up the google map
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapi = new google.maps.Map(this.mapDiv.nativeElement, mapOptions);
// Below code is provided by a ai pollution control website (http://aqicn.org/faq/2015-09-18/map-web-service-real-time-air-quality-tile-api/)
// haven't changed anything in below code copied as it is from web
var waqiMapOverlay = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return 'http://tiles.aqicn.org/tiles/usepa-aqi/' + zoom + "/" + coord.x + "/" + coord.y + ".png?token=_TOKEN_ID_";
},
name: "Air Quality",
});
// Insert above received data into map
mapi.overlayMapTypes.insertAt(0,waqiMapOverlay);
`

Probably your map is not getting coordinates(position.coords.latitude, position.coords.longitude) , that's why your map is not rendering. try with navigator.Geoloaction.getCurrentPosition... or check if any plugin is required to get user geolocation. & prefer to give some fallback coordinates.
this.lat = position.coords.latitude || "21.1610858";
this.long = position.coords.longitude || "79.0725101";

Related

google maps api findplace request not working properly

I want to display on my webpage the location from a JSON that has displayed a pharmacy name. The point is that google maps API is a little bit over my power of knowledge. I did a find-place request into the google maps API, but the location that is displayed is the one from my current location.
Here is the part of the code that would interest you
<div id="map"></div>
<script src="./keys.js"></script>
<script>
let map;
document.addEventListener("DOMContentLoaded", () => {
let s = document.createElement("script");
document.head.appendChild(s);
s.addEventListener("load", () =>
{
console.log("script has loaded");
x = navigator.geolocation;
x.getCurrentPosition(success, failure)
function success(position){
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
var coords = new google.maps.LatLng(myLat,myLong);
map = new google.maps.Map(document.getElementById("map"), {
center: coords,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: coords,
})
}
function failure(){}
});
s.src = `https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=<%= "#{#medicament['farmacies'].first['name']}"%>&inputtype=textquery&fields=formatted_address,name,rating,opening_hours,geometry&key=**************`;
});
</script>
</div>
where <%= "#{#medicament['farmacies'].first['name']}"%> represents the name of the pharmacy from the html erb file.
What I found strange is that if I inspect the page where the location is the s.src takes me to a JSON that has all the right address information for the pharmacy.
Here you can see an image with the response from the API:
What I want is to point to the address of that pharmacy on google map. Any tips&tricks are very welcome!
Use google.maps.places.PlacesService.findPlaceFromQueryinstead.
Also see this tutorial.
var service = new google.maps.places.PlacesService();
var request = {
query: 'Museum of Contemporary Art Australia',
fields: ['name', 'geometry'],
};
const {results} = service.findPlaceFromQuery(request);

how to get lat long on mouse pointer in google maps? [duplicate]

What I would like to do is create app where when anyone clicks on the map object and two fields get filled with latitude and longitude at every click. Is there sample code of Google Maps V3 JavaScript API (Geocoding API) somewhere out there that does something like that?
You can achieve this with google.maps.event' LatLng property:
Something like this would show how it works. Here is a JSFiddle Demo:
google.maps.event.addListener(map, 'click', function(event){
alert('Lat: ' + event.latLng.lat() + ' Lng: ' + event.latLng.lng());
});
Where map is your google map object. Yes the example is in V2 i think, and if you would like to create a marker on click you can simply create it within the click callback function.
Here is a complete code for version 2 which i had been using for a long time and i have published in the site.
http://vikku.info/programming/google-maps-v2/get-lattitude-longitude-onmouseover-and-onmouseclick-google-map-v2.htm
just click view source code from your browser and copy save the contents. it will work perfectly. only thing is you need to change the map api key.
Here is the code for google map version 3
http://vikku.info/programming/google-maps-v3/get-lattitude-longitude-onclick-and-onmouseover-google-map-v3.htm
function onload()
{
var map= new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
google.maps.event.addListener(map, 'click', function(event){
alert('Lat: ' + event.latLng.lat() + ' and Longitude is: ' + event.latLng.lng());
}
After loading code you can write this code to get latitude and longitude of fix points.
please try
var map = [google map];
google.maps.event.addListener(map, 'click', function (mouseEvent) {
alert(mouseEvent.latLng.toUrlValue());
});

embed other map (google,bing) to openstreet map

I'm currently using google map api v3 but google block my site. So I use my sub-domain temporarily and it work fine.
Now to prevent that happen again I will change my default map to openstreetmap. Now my question is how do i embed the other map like google, bing and etc to OSM.
I'll try this code but what happen is opposite, the OSM is embedded to google map
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18 }));
I found this link and think it is the one i look for. i can switch to OSM, Google, and Bing Map.
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?sensor=FALSE&libraries=drawing'></script>
<script type='text/javascript' src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'></script>
var map = new OpenLayers.Map('map', {
projection: new OpenLayers.Projection('EPSG:900913')
});
var osm = new OpenLayers.Layer.OSM();
var gmap = new OpenLayers.Layer.Google('Google street maps');
var bing = new OpenLayers.Layer.Bing({
key: 'register your api key at bingmapsportal.com',
type: 'Road',
metadataParams: {mapVersion: 'v1'}
});
map.addLayers([osm, gmap, bing]);
map.setCenter(
new OpenLayers.LonLat(2.2, 54.0).transform(
new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject()
), 5 );
map.addControl(new OpenLayers.Control.LayerSwitcher());
This can switch to a different webmap. If you have better than this let me know.

Use iPhone location to update google map

I am building a cycle information site and want to be able to grab the users location from their iPhone so i update my Google map and provide the user with relevant information. There is a Drupal module called Geolocation which uses the HTML5 option to do this and i have found the code which it is performing the task in the module below.
// START: Autodetect clientlocation.
// First use browser geolocation
if (navigator.geolocation) {
browserSupportFlag = true;
$('#geolocation-help-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').append(Drupal.t(', or use your browser geolocation system by clicking this link') +': <span id="geolocation-client-location-' + i + '" class="geolocation-client-location">' + Drupal.t('My Location') + '</span>');
// Set current user location, if available
$('#geolocation-client-location-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').click(function() {
navigator.geolocation.getCurrentPosition(function(position) {
latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
Drupal.Geolocation.maps[i].setCenter(latLng);
Drupal.Geolocation.setMapMarker(latLng, i);
Drupal.Geolocation.codeLatLng(latLng, i, 'geocoder');
}, function() {
Drupal.Geolocation.handleNoGeolocation(browserSupportFlag, i);
});
});
}
Does anybody have any Google Maps API V3 experience of implementing this or similar? I would prefer the user to have to click "My Location" or equivalent to then use their iPhone's location to update the map rather than request it automatically. This is my Map and the array of markers that i have on it. How can i utilise the iPhones location to update it?
function initialize() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.51251523, -0.133201961),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
setMarkers(map, spots);
}
var spots = [
['Marylebone', 51.51811784, -0.144228881, '2.png', 2901, 'Broadcasting House - Marylebone</br>Available Bikes: 1</br>Number of Docks: 13</br> View more information about this dock'],
['Fitzrovia', 51.51991453, -0.136039674, '3.png', 2908, 'Scala Street - Fitzrovia</br>Available Bikes: 8</br>Number of Docks: 21</br> View more information about this dock'],
['Fitzrovia', 51.52351808, -0.143613641, '3.png', 2923, 'Bolsover Street - Fitzrovia</br>Available Bikes: 6</br>Number of Docks: 19</br> View more information about this dock'],
['Fitzrovia', 51.52025302, -0.141327271, '3.png', 2975, 'Great Titchfield Street - Fitzrovia</br>Available Bikes: 5</br>Number of Docks: 19</br> View more information about this dock'],
['Bloomsbury', 51.51858757, -0.132053392, '3.png', 2982, 'Bayley Street - Bloomsbury</br>Available Bikes: 12</br>Number of Docks: 25</br> View more information about this dock']
];
function setMarkers(map, locations) {
var image1 = new google.maps.MarkerImage('amber-spot.png',
new google.maps.Size(30, 36),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var spot = locations[i];
var myLatLng = new google.maps.LatLng(spot[1], spot[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: spot[3],
title: spot[0],
zIndex: spot[4],
html: spot[5]
});
bounds.extend(myLatLng);
map.fitBounds(bounds);
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}
}
thanks
Lee
First you will need a javascript function that will be fired from a button press, or a link click. This function will use the geolocation api available through html5 to check if the user can provide you with their location and grab it if so. The remainder of the function will use the google maps api to pan to that lat lng coordinate and set the zoom level appropriately.
Here is the google maps api map object which has the methods you need:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
And this site has a great overview of basically everything you are trying to do:
http://www.html5laboratory.com/geolocation.php
Finally don't forget to save the location in your database or client side javascript array. If you are saving the data, warn the user of that for privacy implications.

How do I upload a .gpx file from localhost to google maps (v3) ?

I'm new to the Google Maps API and I'm working on localhost.
I want to add the ability for a user to upload their .gpx file and visualize it on the Google Map.
I've found this AJAX function wich works fine when I hardcode the .gpx file, but when I try to import the file from my computer, I got a grey screen for short second which then disappears.
Any idea or solution for this problem is more than welcome.
Thanks in advance.
function get_file() {
var fileInput = document.getElementById("file_upload");
var filename = fileInput.value;
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
loadGPXFileIntoGoogleMap(map, filename);
}
function loadGPXFileIntoGoogleMap(map, filename) {
$.ajax({url: filename,
dataType: "xml",
success: function(data) {
var parser = new GPXParser(data, map);
parser.setTrackColour("#ff0000"); // Set the track line colour
parser.setTrackWidth(5); // Set the track line width
parser.setMinTrackPointDelta(0.001); // Set the minimum distance between track points
parser.centerAndZoom(data);
parser.addTrackpointsToMap(); // Add the trackpoints
parser.addWaypointsToMap(); // Add the waypoints
}
});
}
There is no way to access filesystem from JavaScript.
This is a security issue. To resolve your issue I can see only one option: You should have server-side functionality that will temporary store user uploaded data. And then you can load user defined .gpx files from server.