I am developing an ionic app to be run on Android. On a particular screen, I have a google maps and a search box. I have used the phone gap plugin for the google maps to get the native map instead of using Google Maps Javascript API as it is too slow.
The search box is autocomplete to get places from google using the following code -
input = document.getElementById 'search-input'
autocomplete = new google.maps.places.Autocomplete(input)
This turns the input field with autocomplete for places from google. The problem is that I am not able to select any of the options from the autocomplete dropdown.
My HTML code -
<ion-content scroll="false">
<div id="searchBox">
<input id="search-input">
</div>
<div id="map-canvas">
</ion-content>
The map-canvas holds the map. I tried adding ng-focus="disableTap()" to input search-input.
disableTap = ->
container = document.getElementsByClassName 'pac-container'
angular.element(container).attr 'data-tap-disabled', 'true'
angular.element(container).on 'click', ->
document.getElementById('search-input').blur()
I found this solutions at this link
But this does not work. Any inputs here? I'm at my wits end here.
The below worked for me.
From user #TillaTheHun0 :
.controller('MyCtrl', function($scope) {
$scope.disableTap = function(){
container = document.getElementsByClassName('pac-container');
// disable ionic data tab
angular.element(container).attr('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
angular.element(container).on("click", function(){
document.getElementById('searchBar').blur();
});
};
})
Okay i found the solution, this will make you able to select on mobile
add this after creating your map
$$('body').on('touchstart','.pac-container', function(e){
e.stopImmediatePropagation();
})
i will also post my full code in case you're confused :
var myLatLng = {lat: 36.5802466, lng: 127.95776367};
document.getElementById('qkp-lat').value = myLatLng.lat;
document.getElementById('qkp-lng').value = myLatLng.lng;
window.postmap = new google.maps.Map(document.getElementById('postmap'), {
center: myLatLng,
zoom: 6,
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: 'roadmap'
});
// GOOGLE MAP RESPONSIVENESS
google.maps.event.addDomListener(window, "resize", function() {
var center = postmap.getCenter();
google.maps.event.trigger(postmap, "resize");
postmap.setCenter(center);
});
//MARKER
window.PostAdMarker = new google.maps.Marker({
map: postmap,
position:myLatLng,
draggable: true,
anchorPoint: new google.maps.Point(0, -29)
});
//LOAD FROM CURRENT CITY
var geocoder = new google.maps.Geocoder();
//AFTER DRAG AND DROP SHOWS THE LAT AND LONG
google.maps.event.addListener(PostAdMarker, 'dragend', function (event) {
var latlng = {lat: this.getPosition().lat(), lng: this.getPosition().lng()};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[1]) {
// saving to dom
document.getElementById('qkp-lat').value = latlng.lat;
document.getElementById('qkp-lng').value = latlng.lng;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
});
var getlocDiv = document.createElement('div');
var getlocvar = new getloc(getlocDiv, postmap);
getlocDiv.index = 1;
postmap.controls[google.maps.ControlPosition.TOP_RIGHT].push(getlocDiv);
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
postmap.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
postmap.addListener('bounds_changed', function() {
searchBox.setBounds(postmap.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: postmap,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
postmap.fitBounds(bounds);
});
$$('body').on('touchstart','.pac-container', function(e){
e.stopImmediatePropagation();
})
Related
I can not give much information, I just followed the tutorial from https://developers.google.com/maps/documentation/javascript/overview#js_api_loader_package to show a basic map.
the code is working properly on browser.
As requested, the code that is not working on mobile device:
let position;
this.geolocalizationService.getCurrentPosition().then(
p => {
position = { lat: p.coords.latitude, lng: p.coords.longitude};
},
err => this.logger.err(`Error in poisition obtaining ${err}`)
);
const loader = new Loader({
apiKey: 'MY_API_KEY',
version: 'weekly'
});
loader.load().then(() => {
this.map = new google.maps.Map(document.getElementById('map'), {
center: position,
zoom: 10,
});
});
The geolocalization method is correctly returning the position of the device.
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
I'm working on a simple Alloy app. I have a view I want to move back and forth horizontally (thus to move and then return to its original position).
I wrote this function
function move(view) {
var origin = view.getCenter();
console.log("origin ", origin);
console.log("rect ", view.getRect());
var forth = Titanium.UI.createAnimation();
forth.duration = 700;
forth.center = {
x: 0
};
forth.addEventListener('complete', function() {
view.animate(back);
});
var back = Titanium.UI.createAnimation();
back.duration = 300;
back.center = {
x: origin.x
};
back.addEventListener('complete', function() {
alert('completed');
});
view.animate(forth);
}
I you run it, it crashes at x: origin.x because origin is undefined. Moreover, both view.center and view.rect are undefined, thus it's impossible for me to store the original position.
Any help?
Thanks
PS: Code has been tested on iOS simulator, although is meant to be Android and iOS compatible.
Why dont you just animate the left position and work with the view.getRect() ?
var origin = view.getRect();
//console.log("origin ", origin);
console.log("rect ", view.getRect());
var forth = Titanium.UI.createAnimation();
forth.duration = 5000;
forth.left = 0;
forth.addEventListener('complete', function() {
view.animate(back);
});
var back = Titanium.UI.createAnimation();
back.duration = 5000;
back.left = origin.x;
back.addEventListener('complete', function() {
alert('completed');
});
view.animate(forth);
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.
I'm trying to make fade in / fade out effects using a given HTMLAudio element.
To use Web Audio API's AudioParam interface for that purpose, I wrapped the HTMLAudio element around a MediaElementSource node and connect it to a Gain node.
The following code works perfectly in desktop Chrome browser.
However, it doesn't work in Android Chrome. (the sound doesn't diminish but stops abruptly after 2 seconds.)
<!DOCTYPE html>
<body>
<button disabled>Play</button>
<script>
var button = document.getElementsByTagName('button')[0];
var audioElem = new Audio();
audioElem.src = 'bgm.mp3';
var ctx = new AudioContext();
var sourceNode = ctx.createMediaElementSource(audioElem);
var gainNode = ctx.createGain();
sourceNode.connect(gainNode);
gainNode.connect(ctx.destination);
audioElem.addEventListener('canplay', function () {
button.disabled = false;
}, false);
button.addEventListener('click', function () {
if (button.textContent === 'Play') {
// Fade in
audioElem.play();
fade(0, 1, 2)
.then(function () {
button.textContent = 'Pause';
button.disabled = false;
});
} else {
// Fade out
fade(1, 0, 2)
.then(function () {
audioElem.pause();
button.textContent = 'Play';
button.disabled = false;
});
}
button.disabled = true;
}, false);
function fade(start, end, duration) {
return new Promise(function (pFulfill, pReject) {
// Fade in/out using AudioParam interface.
gainNode.gain.linearRampToValueAtTime(start, ctx.currentTime);
gainNode.gain.linearRampToValueAtTime(end, ctx.currentTime + duration);
setTimeout(function () {
pFulfill();
}, duration * 1000);
});
}
</script>
</body>
Does anyone know any workarounds?
This is a known bug in Android Chrome: https://code.google.com/p/chromium/issues/detail?id=240415.
Worth mentioning that you can set the volume of a video element like:
$('video').volume = 0.5