Two questions here, but they're related. Is there a way to make the centerMapOnUser() action smooth? I have a marker that denotes my location, and it's draggable.
// watch for marker movement, and update location accordingly
function updateUserLocation(latLng) {
var revGeo = new google.maps.Geocoder();
revGeo.geocode({'latLng': latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
$('#loc').html(results[1].formatted_address);
}
} else {
alert("Geocoder failed due to: " + status);
}
});
Gmaps.map.userLocation = latLng;
Gmaps.map.centerMapOnUser();
lat = latLng.lat();
lng = latLng.lng();
}
This is very abrupt, and almost disorienting, though. I was wondering if anyone knew of a way to make it a smooth transition.
Side question. Sometimes the map shows 1 marker, sometimes it shows 26 (A-Z). If it's only 1, the zoom level is set to max. I disabled auto_zoom and added this function:
function zoom() {
if (Gmaps.map.markers.length == 1) {
//only one marker, choose the zoom level you expect
Gmaps.map.serviceObject.setZoom(16);
}
else{
//more than one marker, let's auto_zoom
Gmaps.map.map_options.auto_zoom = true;
Gmaps.map.adjustMapToBounds();
}
}
Checking the console, Gmaps.map.markers always returns 0, whether there are 0, 1, or several markers. Markers get added initially, though, and even added later on through the replaceMarkers() function, so everything seems to be configured proper.
Related
I am clustering on markers at the same location only (i.e. maxClusterRadius = 0). When clicking on the cluster I would like it to centre and zoom in at a specific zoom level (not max zoom), and then immediately spiderfy.
Using the following code, the spiderfy does not occur after the zoom, but will if already at the desired zoom level. I suspect that this is because the cluster is considered to be different after zoom. How can I reference the new cluster (e.g. based on Lat/Long)?
cluster.on('clusterclick', function (a) {
if (map.getZoom() < 19) {
map.once('zoomend', function() { a.layer.spiderfy(); });
map.flyTo(a.layer.getLatLng(), 19);
}
else
a.layer.spiderfy();
});
Same problem. I have this workaround :
var mymap = L.map('mapid_<?= $this->id?>',{
maxZoom:13,
scrollWheelZoom:false,
}).setView([43.38388,-1.3049538], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA'}).addTo(mymap);
var markers = L.markerClusterGroup({
disableClusteringAtZoom: 14,
spiderfyOnMaxZoom: false,
zoomToBoundsOnClick:false,
animate:false
});
clickedMarker="";
mymap.on('zoomend', function() {
if (clickedMarker!=="" && mymap.getZoom()>=mymap.options.maxZoom) {
clickedMarker.__parent.spiderfy();
clickedMarker="";
}
});
markers.on('clusterclick', function (a) {
if (a.layer._childCount>0) {
clusterMarkers = a.layer.getAllChildMarkers();
clickedMarker=clusterMarkers[0];
}
if (mymap.getZoom()>=mymap.options.maxZoom) {
a.layer.spiderfy();
} else {
a.layer.zoomToBounds({padding: [20, 20]});
}
});
Strange but spiderfy is not working with animate option set to true…
I've been doing mobile part of my project after "completing" the web part. I'm using google map api. I have coded following:
function codeAddress() {
var image = 'images/tickmark1.png';
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var markerZad = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: "NEW TASK",
icon: image
});
document.getElementById('latitude').value =results[0].geometry.location.nb.toPrecision(9);
document.getElementById('longitude').value=results[0].geometry.location.ob.toPrecision(9);
document.getElementById('adrs').value=document.getElementById('address').value;
document.getElementById('latit').value =results[0].geometry.location.nb.toPrecision(9);
document.getElementById('longit').value=results[0].geometry.location.ob.toPrecision(9);
alert("Ustalono wspolrzedne nowego zadania. Wybierz pracownika \n (PPM usuwa znacznik)");
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
google.maps.event.addListener(markerZad, 'click', function() {
alert("Nowe zadanie: \n"+ address + "\n"+"Wybierz pracownika \n (PPM usuwa znacznik)");
map.setZoom(14);
map.setCenter(this.getPosition());
});
google.maps.event.addListener(markerZad, 'rightclick', function() {
markerZad.setMap(null);
document.getElementById('latitude').value =0;
document.getElementById('longitude').value=0;
document.getElementById('adrs').value=0;
document.getElementById('latit').value =0;
document.getElementById('longit').value=0;
document.getElementById('ajdideva').value="X";
document.getElementById('iddev').value=0;
document.getElementById('baton').disabled=true;
alert("Usunieto znacznik. Wpisz inny adres.");
});
});
}
Let's leave behind the level of this code. I'm sure it's a bad one. But the thing is...it used to work for me like few days ago. Now it doesn't. And yes, I haven't touched it since then... I figured out myself, that the problem causes "results". I get status==OK, then it places a marker in a correct spot, and then...nothing happens. I mean my inputs in html file don't get their values changed and +listeners aren't working. When I changed "results[0]." etc to simple string, it worked, that's why I think that there's a problem with results[0]. Any suggestions please?
Don't access undocumented properties like e.g. results[0].geometry.location.nb . The names of these properties may(and will) change. To access the values of these properties use the documented methods, e.g. lat() to access the latitude of a LatLng-instance:
document.getElementById('latitude').value
= results[0].geometry.location.lat().toPrecision(9);
I am using phonegap, jquerymobile the googlemap API to get my current position and to watch my position.
For this, when I lunch my map page, my position is shown with a marker and the marker move when I move.
Even if it works excpeted when I close my App (onPause).
Here is my code (you can tell me how I can perfect it :o) )
$('#home').live("pagebeforeshow", function() {
if($('#googleAPI').length != 0){
navigator.geolocation.getCurrentPosition(function(position){
//showMap('mapHome',position.coords.latitude, position.coords.longitude);// Canvas, lat, long
var latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
// Google Map options
var myOptions = {
zoom: 17,
//zoomControl : 1,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP////ROADMAP, SATELLITE, HYBRID and TERRAIN
};
// Create the Google Map, set options
Tracking.mapy = new google.maps.Map(document.getElementById('mapHome'), myOptions);
//addMarker(position.coords.latitude,position.coords.longitude);
},
showError,
{
enableHighAccuracy : true,
maximumAge : 2000
//maximumAge:Infinity
});
}
})
$('#home').live("pageshow", function() {
// Place and move the marker regarding to my position and deplacement
if($('#googleAPI').length != 0){
//var track_id = "me";
Tracking.watch_id = navigator.geolocation.watchPosition(
// Success
function(position){
var lat = position.coords.latitude;
var long = position.coords.longitude;
var latLng = new Array();
latLng[0] = lat;
latLng[1] = long;
//Tracking.myCoordinates.push(lat,long);
Tracking.myCoordinates.push(latLng);
addMarker(lat, long);
},
// Error
showError,
{
frequency: 1000
});
console.log('HW : WatchPosition called. Id:' + Tracking.watch_id);
}else{
Alert.show('The map API has not been loaded. Check for connection and try again. (pagebeforeshow)');
}
})
$('#home').live("pagebeforehide", function() {
if($('#googleAPI').length != 0){
//track_id = "me";
// Stop tracking the user
if (Tracking.watch_id != null) {
navigator.geolocation.clearWatch(Tracking.watch_id);
console.log('HW : WatchPosition cancelled Id:' + Tracking.watch_id);
Tracking.watch_id = null;
}
//navigator.geolocation.clearWatch(Tracking.watch_id);
//Tracking.watch_id = null;
Tracking.myCoordinates = new Array();
}else{
Alert.show('The map API has not been loaded. Check for connection and try again. (pagebeforeshide)');
}
});
The problem is when I close my App, because I still need to be alert when I go outside of my geofence. Then, as lomg as I do not stop to watch my position, I need it to be watching even if I close my position or if I lunch another app.
Then I do not know how to do when I called that Phonegap even:
document.addEventListener('pause', onPause, false);
function onPause(){}
Should I simply relunch my watch code with a different watch_id?
Any suggestion?
Many thank and happy new year
I think what you're trying to get at is running a background process using phonegap. The discussion in this link seems to say that it's only possible if you write a plugin to perform that functionality. PhoneGap doesn't have an API to do it out of the box.
Executing javascript in background using phonegap
I want to open a Google Maps InfoWindow based on whether or not one of my buildings is throwing a building alarm. The buildings I have the markers on all have alarm states (on or off), and if they are in alarm state, I am changing the color of the marker to yellow or red, depending on the severity of the alarm. When the alarms are "red" alarms, the marker is animated with the google.maps.Animation.BOUNCE effect.
The bounce effect is sometimes not enough to garner attention (we leave this screen open on a wall, and the data in the $(this).children(".alarm-count") div below changes dynamically due to another script we have running on the site in the background.
I already know how to change the markers based on the alarm state, can I also open an InfoWindow within the same condition? I have tried this:
google.maps.event.addListener(map,'idle',(function(marker,i){
return function(){
infowindow.setContent(
'<div class="infowindow-inner">'+
'<a href="'+bldgGfx[i]+'" onclick="window.open('+bldgGfx[i]+');return false;" target="_blank" title="'+bldgName[i]+' ('+bldgAddr[i]+')">'+
'<h2>'+bldgName[i]+'</h2>'+
'<h4>'+bldgAddr[i]+'</h4>'+
'<p>'+mainMeter[i]+' kW</p>'+
'<p>'+alarmCount[i]+' Alarms</p>'+
'</div>'
);infowindow.open(map,marker);
}
})(marker,i));
but it doesn't seem to be working.
The long and short of it is I need to evaluate one value per marker in my page, and open (or not open) the InfoWindow for each building based on that value.
Here is my code:
$(".building").each(function(i){
bldgNo[i] = $(this).children(".bldg-no").html().slice(1);
bldgName[i] = $(this).children(".bldg-name").html();
bldgAddr[i] = $(this).children(".bldg-address").html();
bldgGfx[i] = $(this).children(".bldg-graphic").html();
mainMeter[i] = $(this).children(".main-meter").html();
alarmCount[i] = $(this).children(".alarm-count").html();
latitude[i] = $(this).children(".latitude").html();
longitude[i] = $(this).children(".longitude").html();
if (alarmCount[i]!="N/A"){alarmCount[i]=alarmCount[i].slice(0,-3);}
if (alarmCount[i]>"0" && alarmCount[i]!="N/A"){
marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:redIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.BOUNCE);
////
//// THE COMMAND TO OPEN THE INFOWINDOW WILL GO HERE, RIGHT?
////
}
else if ($(this).hasClass("new")||(mainMeter[i]=="N/A")||(!isNumber(mainMeter[i]))) {
marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:yellowIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.NULL);}
else {
marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:greenIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.NULL);}
markersArray.push(marker);
google.maps.event.addListener(marker,'click',(function(marker,i){
return function(){
infowindow.setContent(
'<div class="infowindow-inner">'+
'<a href="'+bldgGfx[i]+'" onclick="window.open('+bldgGfx[i]+');return false;" target="_blank" title="'+bldgName[i]+' ('+bldgAddr[i]+')">'+
'<h2>'+bldgName[i]+'</h2>'+
'<h4>'+bldgAddr[i]+'</h4>'+
'<p>'+mainMeter[i]+' kW</p>'+
'<p>'+alarmCount[i]+' Alarms</p>'+
'</div>'
);infowindow.open(map,marker);
}
})(marker,i));
i++;
});
Since many buildings may be "on alert", you'll want a InfoWindow array (in my demo it's a global because I use an inline call); however, the screen may get cluttered very easily. I wrote a Z-Index routine to bring a clicked InfoWindow to front. You might also want to consider MarkerWithLabel or InfoBubble because in my opinion they look better than the vanilla InfoWindow.
Please see the demo
demo side-by-side with code
I'll only copy some of the parts that are very different.
var infowindows = [];
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// MANY LINES SKIPPED
// ...
$(this).children(".longitude").html();
infowindows[i] = new google.maps.InfoWindow({
content:'<div class="infowindow"
onclick="bringToFront('+i+')">'+bldgName[i]+'</div>'});
if (alarmCount[i]>0 && alarmCount[i]!="N/A"){
// marker=new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,shadow:shadow,icon:redIcon,title:bldgName[i]+" \n"+bldgAddr[i],optimized:false});marker.setAnimation(google.maps.Animation.BOUNCE);
marker = new google.maps.Marker({position:new google.maps.LatLng(latitude[i],longitude[i]),map:map,title:"red"});
infowindows[i].open(map,marker);
//// THE COMMAND TO OPEN THE INFOWINDOW WILL GO HERE, RIGHT?
}
...
google.maps.event.addListener(marker,'click',(function(marker,i){
return function(){
infowindows[i].open(map,marker);
bringToFront(i);
}
})(marker,i));
});
}
function bringToFront(windowIndex) {
console.log(windowIndex);
for (var i = infowindows.length-1, n = 0; i >= n; i--) {
infowindows[i].setZIndex(0);
}
infowindows[windowIndex].setZIndex(1);
}
I am using 'jquery-ui-map' for an android app. My emulator is Google API Level 13 version 3.2. My Javascript code is :
$('#gps_map').live("pageshow", function() {
$('#map_canvas_2').gmap('refresh');
$('#map_canvas_2').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
$('#map_canvas_2').gmap('get', 'map').panTo(latlng);
$('#map_canvas_2').gmap('search', { 'location': latlng }, function(results, status) {
if ( status === 'OK' ) {
$('#from').val(results[0].formatted_address);
}
});
} else {
alert('Unable to get current position');
}
});});
This code always fails to get location. I can't see the GPS icon in the emulator. I tried setting all possible permissions, tried setting the latlong coordinates with geo fix method but nothing works. Is there ANY way by which geo location can work on android ?
Finally found the answer to this.
$('#map_canvas').gmap('getCurrentPosition', function(pos, status) {
if (status === "OK") {
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
$('#map_canvas').gmap('option', 'center', latLng);
} else {
// error msg
}
}, { timeout: 10000, enableHighAccuracy: true} );
Adding a longer timout in options, like shown above fixes the issue. The example shows a long timeout: 10 seconds.