I want to detect map position change (same as map camera change) in Yandex maps. Google maps API provide this opportunity via OnCameraChangeListener(), but I couldn't find the appropriate one for Yandex one.
SO:Which is the appropriate function of Google's OnCameraChangeListener in Yandex maps?
Thanks in advance.
I know the answer is too so late , but maybe help someone :
class GeofenceActivity : ComponentActivity() , CameraListener {
private lateinit var mapViewYandex: com.yandex.mapkit.mapview.MapView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
SetupMapInitializing(this)
mapViewYandex.map.addCameraListener(this)
}
private fun SetupMapInitializing(cx : Context){
try {
MapKitFactory.setApiKey("your-key")
MapKitFactory.initialize(cx)
I18nManagerFactory.setLocale(Locale.getDefault().language)
} catch(e : IOException){
e.printStackTrace()
}
}
override fun onCameraPositionChanged(
p0: Map,
p1: CameraPosition,
p2: CameraUpdateReason,
p3: Boolean
) {
Log.w(
"Yandex",
p1.target.latitude.toString() + " , " +
p1.target.longitude.toString()
)
}
}
You need top add an event handler for the map with the title of boundschange
Here is some simplae sample code:
<script>
var myMap;
ymaps.ready(init);
function init () {
myMap = new ymaps.Map('map', {
center: [55.76, 37.64], // Moscow
zoom: 10
});
//add an event handler for detecting any change to the boudnaries of the map
myMap.events.add('boundschange', onBoundsChange);
//a callback function to do something with the new boundaries
function onBoundsChange(e){
console.log(e.originalEvent.newBounds);
}
}
</script>
And the most basic HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Detecting boundary changes of a Yandex Map</title>
<script src="https://api-maps.yandex.ru/2.1/?lang=en_RU&apikey=<your API-key>" type="text/javascript"></script>
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
Related
I'm rather new to this and currently working on my first app (for a school project). I followed this https://www.w3.org/TR/geolocation-API/ tutorial. When I open the project in the browser (on a pc) it gives the coordinates but once installed (though phonegap) on my phone nothing seems to happen. Also the implementation with google maps does not seem to work (also not on the pc). Can any of you help me or redirect me to easy to follow guids?
These are the sources I looked at as well:
https://demos.jquerymobile.com/1.4.5/map-geolocation/
https://www.w3.org/TR/geolocation-API/
https://forum.jquery.com/topic/jquery-mobile-activating-geolocation-on-mobile-devices
https://mobiforge.com/design-development/html5-mobile-web-a-guide-geolocation-api
https://cordova.apache.org/docs/en/3.0.0/cordova/geolocation/geolocation.getCurrentPosition.html
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
}
</script>
<html>
<head>
...
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
<script>
</head>
<body>
...
...
<script async defer src="https://maps.googleapis.com/maps/api/js?key=******(Your API Key)">
</script>
</body>
<html>
<!doctype html>
<html>
<head>
<title>Huisartspraktijk app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
<div data-role="header">
<h1>SPOED</h1>
<div data-role="navbar">
<ul>
<li>Mainpage</li>
<li>Chat met de arts</li>
<li>Consultaanvraag</li>
<li>Doorverwijzing</li>
<li>Bloedonderzoek</li>
<li>Berichten</li>
<li>EPD</li>
<li>Mijn medicijnen</li>
</ul>
</div>
</div>
<!-- /content -->
<div role="main" class="ui-content" align="center">
<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
<div style="background-color: lightyellow">
<br>
<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
<p>Meteorenstraat 4<br>
2024 RK, Haarlem</p>
<p>Telefoon<br>
023 - 525 36 00 </p>
<p>Keuze 1: Spoed <br>
Keuze 2: Herhaalrecepten <br>
Keuze 3: Assistentie</p>
<br>
<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
async defer></script>
</div>
Terug
</div>
<!-- /footer -->
<div data-role="footer">
<h2>© 2019 Huisartsapp</h2>
</div>
</div><!-- /page -->
</body>
</html>
When i have opened, page was blank. In place key i have copied my key but still it doesn't works. Someone knows what is wrong? I Have added html etc. I don't know why everytime when i open, page is blank. No errors or something.
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places">
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
type: ['restaurant']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
</script>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places&callback=initMap" async defer>
There are several problems with your code:
you don't close <script> tag that loads Google Maps JavaScript API
you include call for Maps JavaScript API twice
you are missing the opening <script> tag in the code that initializes a map
you use initMap as name of callback function, but in your code the name of function is initialize
function createMarker is not defined
If I fix these issues map is loaded correctly. Have a look at fixed sample:
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
type: ['restaurant']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
//createMarker(results[i]);
}
}
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" async defer></script>
You can also see the example on jsbin: http://jsbin.com/cutomaxoxi/edit?html,output
I hope this helps!
I am creating a phonegap app. In my app I will have a not draggable Google Maps.
In the browser, mousemove event fire continuously while I move the mouse around over the map.
I expected the same behavior in my mobile phone, but the mousemove only fire once.
This is my main.js file
var app = new function () {
return {
initialize: function () {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(23.5403, -74.5463),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addDomListener(map, 'mousemove', function (event) {
console.log('move');
});
google.maps.event.addDomListener(map, 'mousedown', function (event) {
console.log('down', event);
});
google.maps.event.addDomListener(map, 'mouseup', function (event) {
console.log('up', event);
});
}
}
};
google.maps.event.addDomListener(window, 'load', app.initialize);
This is my index.html file
<html>
<head>
<style>
#map-canvas {
width: 100%;
height: 400px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Could anyone take a look and help my get all the mousemove events? I tried touchmove but I could not make it work with Google Maps.
I manage to fire the event constantly adding the code
function move(event) {
console.log('touchmove', event);
event.preventDefault();
}
document.getElementById('map-canvas').addEventListener('touchmove', move, false);
I am developing an android application (build with Phonegap) that requires to display the current location of a user and to load KMZ file (with poly lines) on Google Map (use of google map api).
My application loads the map on a specific zoom level (11) and map is centered based on user's current location (reduce data consumption). I noticed that for android OS 4.2.2 the map is not loaded at all, message displayed " access denied to your current position".
On the other hand map is loaded correctly for android OS 4.1.2, 4.3, 4.4 (not get any message).
Is this a security issue/bug for android 4.2.2?
Or it is a bug related to the Phonegap I use to build the APK?
How can I resolve this issue? Is there any configuration I need to do in the mobile?
Thanks
It works fine on Android 4.2.2 or any other supported version. There might be a mistake in your code settings.
I just re-confirmed by creating a sample App.
Steps:
(1) Include Google API Key and Maps jS link in the html header section
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_VALUE_&sensor=true"></script>
<title>Hello World</title>
</head>
<body>
<b>Road View</b>
<div id="map-canvas" style="width: 100%; height: 200px"></div>
<b>Street View</b>
<div id="pano" style="width: 100%; height: 200px;"></div>
<b>Live Traffic Update View</b>
<div id="traffic" style="width: 100%; height: 200px;"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
(2) In the index.js file declare following function to render maps
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
app.renderMap();
},
receivedEvent: function(id) {
},
renderMap: function() {
// --- Road View
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway, zoom: 11
};
var map = new google.maps.Map( document.getElementById('map-canvas'), mapOptions);
// ---- Street View
var panoramaOptions = {
position: fenway,
pov: { heading: 34, pitch: 10 }
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
// ---- Live Traffic View
var myLatlng = new google.maps.LatLng(34.04924594193164, -118.24104309082031);
var mapOptions = {
zoom: 13,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('traffic'), mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
};
app.initialize();
(3) Add permission in the AndroidManifest.xml file.
(4) Set your project API level to your desired version, for instance 4.2.2
(5) Run App on device and it should show three different types of Map Views ( Road, Street and Live Traffic)
This is the JS file code I use to load KML files on map, get current position, display marker:
'use strict';
angular.module('ehunter.controllers', []).
controller('RegionListCtrl', ['$scope', '$http', '$window',
function($scope, $http, $window) {
$http.get('regions.json').success(function(data) {
$scope.regions = data;
});
$scope.openBrowser = function(url){
$window.open(url, "_blank", "location=yes");
}
}])
.controller('RegionViewCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.region = angular.fromJson($routeParams.r);
var map;
var src = "MY_SERVER"+ $scope.region.File;
initialize();
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 11,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
}
getLocation();
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function displayPosition(position) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map
});
marker.setVisible(true);
marker.setMap(map);
map.setCenter(marker.position);
});
}}
}])
When I remove a marker using marker.setMap(null), it remains visible until I zoom out at which point Google Maps removes it.
The marker is not visible after being removed on the same HTML page with Chrome on Windows.
It appears that the map is not being refreshed properly after the markers are removed.
Code with the issue (marker should disappear after 5s):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<style type="text/css">
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQ7L1PL7pQzSuDfv9kTL_qE4Cp0wy8Oo8&sensor=true">
</script>
<script type="text/javascript">
var theMap = null;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(37.7749295, -122.4194155),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
theMap = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
navigator.geolocation.getCurrentPosition(
function (position) {
// successfully load position
var lat = position.coords.latitude;
var long = position.coords.longitude;
theMap.setCenter(new google.maps.LatLng(lat, long), 21);
},
function (fail) {
console.error("Failed to load GPS coordinates");
}
);
var marker;
function addMarker(itemid, lat, lon) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: theMap
});
}
addMarker('pokemon', 37.42841, -122.16960);
setTimeout(function() {marker.setMap(null);}, 5000);
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas" style="width:100%; height:100%; top:0px; z-index: 10"/>
</body>
</html>
I think, it's the same issue like here: Google Maps API v3 in PhoneGap: markers not drawing properly after move
Try to set the optimized: false property to the marker:
new google.maps.Marker({
map: map,
optimized: false,
clickable: true
});
this should fix it!