I have a click event that grabs coordinates remotely, lays them on a map, and connects them with a polyline. I have other click events that do the same, but want to keep them as a separate layer so that the user can toggle to view each of the clicks they have done. Does anyone know of a good way to group them separately to do this or another approach?
Here is my code so far:
drawPoints: function (points, color) {
$.each(points, function (key, val) {
var location = new google.maps.LatLng(val.Latitude, val.Longitude);
MyTest.addMarker(location, val.Name, val.Description);
MyTest.coordinates.push(location);
});
this.path = new google.maps.Polyline({
path: MyATest.coordinates,
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 2
});
this.path.setMap(this.googlemap);
},
addMarker: function (location, title, html) {
var marker = new google.maps.Marker({
position: location,
map: this.googlemap,
title: title,
html: html
});
this.markers.push(marker);
},
// Removes the overlays from the map, but keeps them in the array
clearOverlays: function () {
if (this.markers) {
for (i in this.markers) {
this.markers[i].setMap(null);
}
}
},
// Shows any overlays currently in the array
showOverlays: function () {
if (this.markers) {
for (i in this.markers) {
this.markers[i].setMap(map);
}
}
},
You've got them kept in this.markers - which is a great start. Now all you need to do is define a click listener function for each marker:
for(i in this.markers) {
google.maps.addListener(this.markers[i], function() {
this.markers[i].clicked = true; });
}
Then, whenever a user wants to toggle only the markers they've clicked on, loop through your markers (like you are doing) and setMap to null on all where this.markers[i].clicked === undefined.
Related
How do I programatically in javascript define which feature is on top of another when they overlap
In This picture I clicked on the smaller geographic feature, however the information for the outer geographic feature came up. I would like to programmatically put the smaller features on top.
Here is the my code to populate the map in javascript-
map.data.loadGeoJson('<path to my geojson definition>');
map.data.setStyle(function (feature) {
let color = 'gray';
console.log(feature);
if (feature.getProperty('isColorful')) {
color = 'blue';
}
return ({
fillColor: color,
strokeColor: color,
strokeWeight: 1
});
});
map.data.addListener('click', function (event) {
let name = event.feature.getProperty('name');
let contentString = '<h4>Polygon Info</h4><br>';
contentString += '<p>';
if (name) {
contentString += '<b>Name:</b>' + name + '<br>';
}
contentString += '</p>';
let infowindow = new google.maps.InfoWindow({
content: contentString,
position: event.latLng
});
infowindow.open(map);
event.feature.setProperty('isColorful', true);
});
Note I reversed the order of the features in the geojson file itself and that did not change the behavior.
You can use the z-index property of feature.Assuming you can disinguish one feature entry from another you can adjust z-index depending on your need in setStyle() function, just work out appropriate values
return ({
fillColor: color,
strokeColor: color,
strokeWeight: 1,
zIndex: zIndex
});
Or update z-index when mouse enters
map.data.addListener('mouseover', function(e) {
map.data.overrideStyle(e.feature, {
//strokeColor: '#1e3a2a',
//strokeWeight: 2, /* can also change these like hover effect */
zIndex: 6
});
});
map.data.addListener('mouseout', function(e) {
map.data.revertStyle();
});
I have created an application in googlemap with poly-line, The application is working fine with the polyline drawn perfectly, But the problem is that i need to draw and show the preview of poly-line, drawing each coordinate by coordinate in google-maps
how can we achieve this? I have tried with setInterval(commented within my code) but its not working properly
Can anyone please tell me some solution for this
$scope.autoRefresh = function() {
try {
//
routePoints = [];
if (!_.isEmpty(items)) {
angular.forEach(items, function(cordinates) {
//setInterval(function ()
//{
routePoints.push(new google.maps.LatLng(cordinates.lat, cordinates.lng));
var route = new google.maps.Polyline({
path: routePoints,
strokeColor: '#FF0000',
strokeOpacity: 2.0,
strokeWeight: 3,
editable: false
});
route.setMap(map);
moveMarker(map, marker, cordinates.lat, cordinates.lng);
markLAT = cordinates.lat;
markLNG = cordinates.lng;
//}, 1000);
});
}
//
} catch (e) {
console.log(e);
}
};
Plunker
setInterval is not the right method, you must use setTimeout, otherwise the functions will run endless(until the browser will crash)
you must increment the delay for setTimeout, otherwise you will not see an animation(all functions will be executed with a delay, but at the same time...after 1 second)
don't create a new Polyline on each function call, you'll have a lot of Polylines at the end(1 for each item) . Create a single Polyline and push the locations to the path of the Polyline
$scope.autoRefresh = function() {
try {
var route = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeOpacity: 2.0,
strokeWeight: 3,
editable: false,
map:map
}),
index=0,
marker=new google.maps.Marker({map:map,icon:icon});
if (!_.isEmpty(items)) {
angular.forEach(items, function(cordinates) {
setTimeout(function ()
{
route.getPath().push(new google.maps.LatLng(cordinates.lat, cordinates.lng));
route.setMap(map);
moveMarker(map, marker, cordinates.lat, cordinates.lng);
markLAT = cordinates.lat;
markLNG = cordinates.lng;
}, 200*++index);
});
}
//
} catch (e) {
console.log(e);
}
};
Plunker
I have a problem with removing a markers on google maps. These markers are created everytime the user creates a waypoint. They have the same position as the waypoint. These markers also have an InfoBox with a button to remove the correct waypoint and marker.
Everytime a waypoint is created I push a marker to one array and an infobox to the other.
This works if I have only one waypoint. The marker and waypoint are removed. But once I have 2 or more it does not work anymore. Once I try to remove one of the waypoints the marker stays on the map, even though I call .setMap(null) and/or .setPosition(null). Everytime I remove a marker I also remove it, the waypoint and info box from their corresponding arrays. Strangely enough, when I call a function to redraw the path, the waypoint does not exist anymore (as planned), but the marker stays.
Here is the code:
var markers = {
waypoints:{
p:[],
i:[],
m:[]
}
};
var saveWaypoints = function(){
removeWaypoints();
var points = directionsRenderer.getDirections().routes[0].legs[0].via_waypoints;
for(var i=0;i<points.length;i++){
var marker = new google.maps.Marker({
map:map,
position:points[i],
icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
id: i
});
var infobox = new InfoBox({
id: i,
position: points[i],
disableAutoPan: true,
boxStyle: {
background: "white",
opacity: 1,
width: "289px",
border: 0,
padding: 0
},
zIndex: 1E4,
isHidden: false,
pane: "floatPane",
enableEventPropagation: false,
content: 'Pozicija: ' + points[i]
});
infobox.open(map,marker);
infobox.hide();
google.maps.event.addListener(infobox,'closeclick',function(){
markers.waypoints.m[this.id_].setMap(null);
markers.waypoints.m[this.id_].setPosition(null);
markers.waypoints.m.splice(this.id_,1);
markers.waypoints.p.splice(this.id_,1);
markers.waypoints.i.splice(this.id_,1);
drawPath();
});
google.maps.event.addListener(marker,'mouseover',function(){
markers.waypoints.i[this.id].show();
});
google.maps.event.addListener(marker,'mouseout',function(){
if(markers.waypoints.i[this.id] !== undefined){
if(!markers.waypoints.i[this.id].keepOpen()){
markers.waypoints.i[this.id].hide();
}
}
});
google.maps.event.addListener(marker,'click',function(){
if(waypointDialog !== null){
waypointDialog.doNotClose(false);
waypointDialog.hide();
}
console.log(this.id);
waypointDialog = markers.waypoints.i[this.id];
waypointDialog.doNotClose(true);
});
markers.waypoints.m.push(marker);
markers.waypoints.i.push(infobox);
markers.waypoints.p.push({
location: points[i],
stopover: false
});
};
};
var removeWaypoints = function(){
if(markers.waypoints !== (null||undefined)){
markers.waypoints.p = [];
markers.waypoints.m = [];
markers.waypoints.i = [];
}
};
I think its because every time its loop, it is creating a marker which is the reason why you cannot access the previous marker, in your code, i think only the last created marker is accessible, to access all marker you should put it inside array after declaration. Try this code
var markers=[]; //initialize it on global
//and on creating marker, inside for loop add this code.
markers.push(marker);
//and to clear the markers in map try the code below
for(var i=0; i< markers.length; i++)
{
markers[i].setMap(null);
}
I have a Google map with multiple POLYGON areas. I have figured out how to ZOOM IN with a single click on the polygon, and ZOOM OUT with a 'dblclick' listener and remove the listeners for them...
Once you have clicked to Zoom In, then double clicked to Zoom Out, it's not allowing me to repeat the function again. Is there a way to zoom in and out multiple times?
Here is the code I have:
//POLYGON ZONE 1 ================================
var zone1;
var triangleCoords = [
new google.maps.LatLng(29.738692, -95.399331),
new google.maps.LatLng(29.738688, -95.394781),
new google.maps.LatLng(29.737048, -95.394781),
new google.maps.LatLng(29.737048, -95.399331)
];
// Construct the polygon
// Note that we don't specify an array or arrays, but instead just
// a simple array of LatLngs in the paths property
zone1 = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#00AEEF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#00AEEF",
fillOpacity: 0.05,
});
zone1.setMap(map);
zone1._myBounds = new google.maps.LatLngBounds();
for (var i=0; i<triangleCoords.length; i++)
{
zone1._myBounds.extend(triangleCoords[i]);
}
var listener = google.maps.event.addListener(zone1, 'click', function () {
map.fitBounds(zone1._myBounds);
google.maps.event.removeListener(listener);
});
var listener2 = google.maps.event.addListener(zone1, 'dblclick', function() {
if (map.getZoom() > 16) map.setZoom(13);
//map.setZoom(map.getZoom() -1);
//map.setCenter(map.getCenter());
google.maps.event.removeListener(listener2);
google.maps.event.addListener(zone1, 'click', function (){
map.fitBounds(zone1._myBounds);});
});
For my other POLYGON areas, would I also have to change the variable names for them to work?
Also, the return to center doesn't seem to be working properly. If I need to ask that in a separate question I will.
The immediate problem is that you don't do the same thing in the click listener you add on dblclick:
google.maps.event.addListener(zone1, 'click', function (){
map.fitBounds(zone1._myBounds);});
vs the original:
var listener = google.maps.event.addListener(zone1, 'click', function () {
map.fitBounds(zone1._myBounds);
google.maps.event.removeListener(listener);
});
I've a complex flow where I've to attach mouseover event for every polyline on the map. The code for attaching the event is simple:
google.maps.event.addListener(polyline, "mouseover", function() {
console.log('event fired');
});
But the event is attaching to few polylines and not to others. What might be the reason?
Edit
Following is some more code that is before the above code and used for defining polyline:
this.polyline = new google.maps.Polyline({
path : [fromPosition, toPosition],
strokeColor : '#CCCCCC',
strokeOpacity : 1.0,
strokeWeight : 2
});
var polyline = this.polyline;
Edit 05-Apr-2012
Following is the code that creates problem, Please explain why it's happening and recommend any solution. Thanks
function Link(from, to) {
this.from = from;
this.to = to;
}
Link.prototype.show = function() {
this.line = new google.maps.Polyline({
path : [this.from, this.to],
strokeColor : "#0000FF",
strokeOpacity : 0.5,
strokeWeight : 6
});
this.line.setMap(map);
google.maps.event.addListener(this.line, 'mouseover', function() {
this.line.setOptions({
strokeOpacity : 1
});
});
google.maps.event.addListener(this.line, 'mouseout', function() {
this.line.setOptions({
strokeOpacity : 0.5
});
});
}
var links = [];
var link2 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)), link1 = new Link(new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18));
links.push(link1);
links.push(link2);
// I've a long list of links, so I'll prefer a loop
for(var i = 0; i < links.length; i++) {
links[i].show();
}
JSFiddle Demo : http://jsfiddle.net/wasimbhalli/9bg6x/
demo: http://jsfiddle.net/kbngxku9/
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-3, 23),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
var bounds = [];
var bounds_group_1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)],
bounds_group_2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)];
bounds.push(bounds_group_1);
bounds.push(bounds_group_2);
for (var i = 0; i < bounds.length; i++) {
addPolylineSegment(bounds[i]);
}
}
function addPolylineSegment(bounds) {
// optionally you can put each polyline
// segment into an array to later use...
var polyline;
polyline = new google.maps.Polyline({
path: bounds,
strokeColor: "#0000FF",
strokeOpacity: 0.5,
strokeWeight: 6
});
polyline.setMap(map);
// attach event listener to each segment...
google.maps.event.addListener(polyline, 'mouseover', function(event) {
this.setOptions({
strokeOpacity: 1
});
});
google.maps.event.addListener(polyline, 'mouseout', function(event) {
this.setOptions({
strokeOpacity: 0.5
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
OK, I'm trying to keep the solution close to your code. The key was changing both listener's this.line.setOptions to this.setOptions:
google.maps.event.addListener(this.line, 'mouseover', function() {
this.setOptions({
strokeOpacity : 1
});
});
google.maps.event.addListener(this.line, 'mouseout', function() {
this.setOptions({
strokeOpacity : 0.5
});
});
I've seen a similar case with markers in another question. I believe this inside the function() already refers to the first argument of addListener(), in this case, this.line, so you are covered just saying this. Here is the jsfiddle:
http://jsfiddle.net/zfFsD/
The other change I made was putting the links[] code in my initialize(). Wish you the best!
I think you have a scope problem.
change
this.line.setOptions
with
this.setOptions
Firebug and console.log() are your friends :)
I managed to work around this using the method described below. If I understood you correctly, the loop in which you attach a listener to a polyline does not in fact get "attached" to the polyline that way, but instead, you need a new class instance that contains the polyline and the listeners. This way, each polyline gets it's own listener.
Please, see the explanation below.
EDIT 5.4.2012
Here's also a crude JSFiddle demonstration of the code in action. Link to JSFiddle demo
function initialize() {
// initialize Google Maps canvas normally
var polylines = [];
// Data set of the polylines you want to present on the map,
// e.g. [ { lat:"...",lon:"..." }, ...]
var polylineData = [{ ... }]
for ( i in polylineData ) {
var line = new google.maps.Polyline({
path: [/*coordinates as google.maps.LatLng objects*/]
});
// Create a new myPolyLineClass instance that contains the polyline data
// and push it to polylines array.
polylines.push(new myPolyLineClass(line));
}
// Set all the polylines and their individual listeners on map
for ( i in polylines) {
polylines[i].line.setMap(map);
}
}
function MyPolylineClass(lineData) {
this.line = lineData;
// + all other data you want the polylines to contain
// Add listeners using google.maps.event.addListener to all class instances
// when they are constructed.
// for instance:
google.maps.event.addListener(line, 'mouseover', function() {
line.setOptions({ [options you want to set when area is hovered
and selected] });
});
// Add listeners also for when polyline is not hovered anymore, respectively,
// and other methods you might want to call when polylines are being interacted with.
};
Hope this helps!
Cheers