Develop Reference

How to hide Google Map but remains my location shown including the markers?

So I followed the documentation of Google Map API to implement it.
But instead of showing the Map, I want it invisible, but remains my location shown into where it should it be including the markers.
can it be done? how?
I found a similar question but it's been a year, I'm thinking maybe there's already solution.

Actually you can not since is against Google policy:
No use of Content without a Google map. Unless the Maps APIs Documentation expressly permits you to do so, you will not use the Content in a Maps API Implementation without a corresponding Google map. For example, you may display Street View imagery without a corresponding Google map because the Maps APIs Documentation expressly permits this use.
No use of Content with a non-Google map. You must not use the Content in a Maps API Implementation that contains a non-Google map.
check this to make sure if your app does no break any Google terms https://developers.google.com/maps/terms#10-license-restrictions

You can use styling to hide whatever map feature you like.
Here is an example map, with everything hidden and a fill color applied on all geometry to have an uniform background worldwide.
function initialize() {
var southWest = new google.maps.LatLng(40.744656, -74.005966);
var northEast = new google.maps.LatLng(34.052234, -118.243685);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var markers = [];
var myLatlng = new google.maps.LatLng(38.392303, -86.931067);
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"elementType": "geometry.fill",
"stylers": [{
"color": "#fff050"
}]
},
{
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
},
{
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}
],
disableDefaultUI: true
});
// Create some markers
for (var i = 1; i < 100; i++) {
var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
}
#map {
height: 150px;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>
<div id="map"></div>
Using disableDefaultUI: true will also remove all the map controls. The logo and text on the bottom right you have to keep for legal aspects.
This tool can help you achieve the result you like.
All this is documented and perfectly legal.
Edit: This example uses the Javascript API (as you tagged your question with google-maps-api-3) but you can achieve the same on Android, see the documentation.

Why my marker is not pointed to my current location

i'm able to get GoogleMap on my Android device , the problem is it is not pointing to my current location.
I have installed these 2 packages:
$ ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"
$ npm install --save #ionic-native/google-maps
below is how my google map looks on my android device
below is my code:
ionViewDidLoad() {
console.log('ionViewDidLoad GoogleMapTestPage');
this.loadMap();
}
ngAfterViewInit() {
//this.loadMap();
}
loadMap() {
// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
map.one(GoogleMapsEvent.MAP_READY).then(
() => {
console.log('Map is ready!');
// Now you can add elements to the map like the marker
}
);
// create LatLng object
let ionic: LatLng = new LatLng(43.0741904,-89.3809802);
// create CameraPosition
let position: any = {
target: ionic,
zoom: 18,
tilt: 30
};
// move the map's camera to position
map.moveCamera(position);
// create new marker
let markerOptions: MarkerOptions = {
position: ionic,
title: 'Ionic'
};
const marker:any = map.addMarker(markerOptions)
.then((marker: Marker) => {
marker.showInfoWindow();
});
}
my html code
<ion-content>
<div #map id="map" style="height:100%;"></div>
</ion-content>
My Question:
how to point to my current location in the above code!!
please help me as I am new to ionic 3, just I wanted to point to users current
location on google !!

You need to make changes on the map like adding marker once it is ready. So move the marker setting code to map.one(GoogleMapsEvent.MAP_READY).
let ionic: LatLng = new LatLng(43.0741904,-89.3809802);
// create CameraPosition
let position: any = {
target: ionic,
zoom: 18,
tilt: 30
};
map.one(GoogleMapsEvent.MAP_READY).then(
() => {
console.log('Map is ready!');
// Now you can add elements to the map like the marker
map.moveCamera(position);
// create new marker
let markerOptions: MarkerOptions = {
position: ionic,
title: 'Ionic'
};
const marker:any = map.addMarker(markerOptions)
.then((marker: Marker) => {
marker.showInfoWindow();
});
}
}
);

Try this and declare variable map:GoogleMap; before constructor after class. So you can reuse your map without render map more and more .Because every single load page your google map api quota is increasing .
My suggestion :
Put loading map on provider
this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{
console.log("Map ready");
this.map.setMyLocationEnabled(true);
this.map.getMyLocation({enableHighAccuracy:true}).then(pos=>{
this.map.setCameraTarget(pos.latLng);
this.map.animateCamera({
target:pos.latLng
});
this.map.addMarker({
title: 'You',
icon: 'pin'
animation: 'DROP',
position: pos.latLng
}).then((marker)=>{
this.userMarker = marker;
marker.setPosition(pos.latLng);
});
});
});

For add marker you have to add marker on your map object with lat&lng and title.
have look:
map.addMarker(new MarkerOptions().position(new LatLng(22.7253, 75.8655)).title("Title"));
Happy coding!!

Firstly make sure your API Key is valid and add this into your manifest ``
Then use add map.setMyLocationEnabled(true) inside the onMapReady(GoogleMap map) method. like this
#Override
public void onMapReady(GoogleMap gMap) {
mGoogleMap = gMap;
mGoogleMap.setMyLocationEnabled(true);
buildGoogleApiClient();
mGoogleApiClient.connect();
}

Looping parse json error in angularjs

I build android apk and install apk in android lolipop adn application work correctly but if application install to android kitkat it doesn't work and just show splashscreen after it just white blank in interface.
I know the trouble in parse json but i don't know how to fix it
this my parse json
kaka.cari($scope.item.code).success(function(data){
$scope.result1= data;
var lat0 = parseFloat(data[0].latitude);
var lng0 = parseFloat(data[0].longitude);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: lat0, lng: lng0},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = data.map((item)=>{
// create new object based on current item
var coords = {
lat: parseFloat(item.latitude),
lng: parseFloat(item.longitude)
};
// return to new array
return coords;
});
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
})
.error(function(data){
});
};
if i don't use var flightPlanCoordinates and try hardcode lat and long it work but if i use var flightPlanCoordinates will be error in android kitkat but not error in ionic serve
This my json
[{"latitude":"-7.331069","longitude":"112.764192"},{"latitude":"-7.331277","longitude":"112.764198"},{"latitude":"-7.331467","longitude":"112.764186"},{"latitude":"-7.331659","longitude":"112.764159"},{"latitude":"-7.331840","longitude":"112.764154"},{"latitude":"-7.332016","longitude":"112.764133"},{"latitude":"-7.332192","longitude":"112.764112"},{"latitude":"-7.332400","longitude":"112.764101"},{"latitude":"-7.332592","longitude":"112.764074"},{"latitude":"-7.332789","longitude":"112.764074"},{"latitude":"-7.333018","longitude":"112.764047"},{"latitude":"-7.333236","longitude":"112.764042"},{"latitude":"-7.333465","longitude":"112.763994"},{"latitude":"-7.333662","longitude":"112.763956"},{"latitude":"-7.333843","longitude":"112.763838"},{"latitude":"-7.333965","longitude":"112.763704"},{"latitude":"-7.333933","longitude":"112.763747"},{"latitude":"-7.334034","longitude":"112.763608"},{"latitude":"-7.333981","longitude":"112.763297"},{"latitude":"-7.333917","longitude":"112.763018"},{"latitude":"-7.333901","longitude":"112.762723"},{"latitude":"-7.333869","longitude":"112.762444"},{"latitude":"-7.333832","longitude":"112.762127"},{"latitude":"-7.333800","longitude":"112.761730"},{"latitude":"-7.333768","longitude":"112.761473"}]
this data console.log(flightPlanCoordinates)
0:Object
lat:-7.331069
lng:112.764192
1:Object
2:Object
3:Object
4:Object
5:Object
6:Object
7:Object
8:Object
9:Object
10:Object
11:Object
12:Object
13:Object
14:Object
15:Object
16:Object
17:Object
18:Object
19:Object
20:Object
21:Object
22:Object
23:Object
24:Object
please help me solve my problem

Map doesn't work on device

I spent a lot of time trying to figure this out.
I have a map on my application and this map loads the actual location once it is loaded.
For some reason on my viewer (using Ionic Viewer) it works on my local device and on my localhost, but When I test it on my iPhone directly from Xcode, the map don't load.
If I compile an .apk and test it on android, the map don't load either.
.controller('mapaCtrl', function($scope, $compile, $location) {
$scope.goPayment = function() {
$location.path('side-menu/history');
};
var myLatlng = new google.maps.LatLng(34.603711, -58.381585);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
google.maps.event.addListener(myLocation, 'click', function() {
infowindow.open(map,myLocation);
});
});
var contentString = "<div><a ng-click='clickTest()'>Pagar Aqui!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
$scope.map = map;
$scope.clickTest = function() {
$location.path('side-menu/pay');
};
})
Any clue?

There may be several things affecting the proper functionality of your app, consider the following:
There could be an issue where the requests to google maps are blocked. Check out the whitelist plugin: https://stackoverflow.com/a/29896923/1956540
Try adding geoLocation permissions, here is an article I found that walks you through the whole thing: http://www.gajotres.net/using-cordova-geoloacation-api-with-google-maps-in-ionic-framework/
It is also important to wrap geolocation code into Ionic deviceready
event, execution will timeout without it:
ionic.Platform.ready(function() {
// Code goes here
}
I'm not sure it's necessary to have these anymore but I know for Android you could verify the permissions needed to exist in AndroidManifest.xml:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
There is probably some iOS equivalent that you can search for but I think installing the plugin should work on its own.
--

Address (Reverse Geocoding) google maps

I have an android application in phonegap , it's a google maps , it shows me my current location , i have a draggable marker in my position and an infoWindow showing my latitude and my longitude.
var map;
var marker;
var infowindowPhoto = new google.maps.InfoWindow();
var latPosition;
var longPosition;
function initialize() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(10,10)
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
initializeMarker();
}
function initializeMarker() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
latPosition = position.coords.latitude;
longPosition = position.coords.longitude;
marker = new google.maps.Marker({
position: pos,
draggable: true,
animation: google.maps.Animation.DROP,
map: map
});
map.setCenter(pos);
updatePosition();
google.maps.event.addListener(marker, 'click', function (event) {
updatePosition();
});
google.maps.event.addListener(marker, 'dragend', function (event) {
updatePosition();
});
});
}
}
function updatePosition() {
latPosition = marker.getPosition().lat();
longPosition = marker.getPosition().lng();
contentString = '<div id="iwContent">Lat: <span id="latbox">' + latPosition + '</span><br />Lng: <span id="lngbox">' + longPosition + '</span></div>';
infowindowPhoto.setContent(contentString);
infowindowPhoto.open(map, marker);
}
initialize();
http://jsfiddle.net/upsidown/d3toa81m/
My problem that I want to show my address instead of my latitude and my longitude in my infoWindow. I find this tutorial https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse . My problem with this tutorial that i don't want to add this:
<input id="latlng" type="text" value="40.714224,-73.961452">
<input type="button" value="Reverse Geocode" onclick="codeLatLng()">
and if I don't add this the function "codeLatLng()" doesn't work. What should I do to show my address in my infowindow.

you are getting the grid coordinate from google maps. Once you get the grid, have you tried to use curl to scrap google maps for the city and state? I am about to do the same thing, good luck.