When using the snackbar from within a GoogleMaps listener for dragend on a Polygon,
let polygon = new google.maps.Polygon({
map: this.map.googleMap,
paths: coords.map(c => ({
lat: c.latitude,
lng: c.longitude
})),
strokeColor: `#caa052`,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: `#ffffb1`,
fillOpacity: 0.35,
draggable: true
});
google.maps.event.addListener(polygon, "dragend", () => {
this._snackBar.open("dragend");
});
the snackbar message gets stuck in the upper left corner and never dismisses.
Working example can be found at https://google-map-drag-breaks-snackbar.stackblitz.io/. Code can be found at https://stackblitz.com/edit/google-map-drag-breaks-snackbar?file=src%2Fapp%2Fsnack-bar-overview-example.ts.
Is there anything that can be done to fix this?
Needed to use NgZone.run since I was not using the map-polygon binding.
constructor(private _snackBar: MatSnackBar, private _ngZone: NgZone) {}
google.maps.event.addListener(polygon, "dragend", () => {
this._ngZone.run(() => this._snackBar.open("dragend"));
});
Related
I am trying to clean up google maps polylines once I render other ones. It works with the markers but with the polylines they stayed. I check google maps api google maps api
and couldn't make it work. It looks for me I am doing something wrong in the order but I have tried many ways and I can't find the solution.
function addMarkers(markerPosition: any, id?: number) {
// Creating markers
const position = { lat: markerPosition._latitude, lng: markerPosition._longitude };
marker = map && new window.google.maps.Marker({
map,
position,
id,
});
// Add listener to markers
marker.addListener('click', () => {
dispatch(getStop(id));
});
// Creating poliLine route
pathToRender.push(position);
// Focus on the markers
loc = map && new window.google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(loc);
return markers.push(marker);
}
useEffect(() => {
setStopInfo(stop.stop);
// stop.stop.userName !== '' && setPopUp(stop.stop);
}, [stop]);
function setPolyLine(pathRout: any) {
routePath = new window.google.maps.Polyline({
path: pathToRender,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
});
routePath.setMap(pathRout);
}
function setMapOnAll(mapToRender: any) {
for (let i = 0; i < markers.length; i += 1) {
markers[i].setMap(mapToRender);
}
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function clearMarkers() {
setMapOnAll(null);
setPolyLine(null);
}
function markersAdministration(routeChoose: number) {
const route = showRoutes[routeChoose];
setMapConfig({ center: { lat: 40, lng: 10 }, zoom: 5, disableDefaultUI: false });
// Clear Markers
clearMarkers();
markers = [];
pathToRender = [];
// Add stops, destination and origin to the markers
addMarkers(route.origin.point);
route.stops && route.stops.map((routeStop: IStops) => addMarkers(routeStop.point, routeStop.id));
addMarkers(route.destination.point);
// Setting up markers and lines layers
setMapOnAll(map);
setPolyLine(map);
}
Thank you for the help.
I solve it, I don't know why it didn't work before but it is working now.
function setMapOnAll(mapToRender: any) {
// Create Markers
for (let i = 0; i < markers.length; i += 1) {
markers[i].setMap(mapToRender);
}
// Create Polyline
routePath = new window.google.maps.Polyline({
path: pathToRender,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
});
routePath.setMap(mapToRender);
// Map focus on Bounds
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function clearMarkers() {
routePath && routePath.setMap(null);
setMapOnAll(null);
}
I try drawing on google maps and I have problem. When I edit position created point google maps duplicate my points and i get two points: old and new.
let pointCord = [];
function createRoute(e) {
const lat = e.latLng.lat();
const lng = e.latLng.lng();
pointCord.push(new google.maps.LatLng(lat, lng));
const flightPathOptions = {
path: pointCord,
editable: true,
draggable: true,
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 5,
map
};
flightPath = new google.maps.Polyline(flightPathOptions);
const getPath = flightPath.getPath();
map.addListener('click', createRoute);
I try apply this code
google.maps.event.addListener(getPath, 'set_at', function(){
pointCord = getPath.getArray();
createRoute(e);
});
but don't help me. How delete old point and update my map?
Your problem it's flightPath inner createRoute. Need your flightPath out your function.
const flightPathOptions = {
path: pointCord,
editable: true,
draggable: true,
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 5,
map
};
flightPath = new google.maps.Polyline(flightPathOptions);
const getPath = flightPath.getPath();
function createRoute(e) {
getPath.push(e.latLng);
}
map.addListener('click', createRoute);
// Aircraft on map
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
optimized: false,
internalid: planes[15],
zIndex: planes[3],
rotation: planes[4],
mouseovertxt: '<b>'+planes[11]+'</b><br />'+planes[0]+'-'+planes[13]+'-'+planes[14]+'<br />Status: '+planes[16]+'<br />Alt: '+planes[9]+'ft Speed: '+planes[10]+'kts<br />EET: '+planes[17]
});
// Aircraft route
line = new google.maps.Polyline({
path: [dep, myLatLng],
strokeColor: "#c3524f",
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: i,
visible: true
});
line2 = new google.maps.Polyline({
path: [myLatLng, arr],
strokeColor: "#c3524f",
strokeOpacity: .5,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: i,
visible: true
});
// On mouse over
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.setContent(this.mouseovertxt);
infowindow.open(map, this);
line.setVisible(false);
line2.setVisible(false);
});
// On mouse out
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
line.setVisible(true);
line2.setVisible(true);
});
}
}
setMarkers(map, planes);
});
Right now I've reversed the visibility of the lines just to show that the correct lines appear, but only one of them will change visible no matter what marker you hover. Is this because I have only one marker, or is there a simple fix to this? Also, I tried fixing the scrollbar bug, but with no luck. Will try some more though.
Possible approach:
store the lines as properties of the markers, than you may access them easily within the mouse-handlers:
// Aircraft on map
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
optimized: false,
internalid: planes[15],
zIndex: planes[3],
rotation: planes[4],
line1:new google.maps.Polyline({
path: [dep, myLatLng],
strokeColor: "#c3524f",
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: i,
visible: true
}),
line2:new google.maps.Polyline({
path: [myLatLng, arr],
strokeColor: "#c3524f",
strokeOpacity: .5,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: i,
visible: true
}),
mouseovertxt: '<b>'+planes[11]+'</b><br />'+planes[0]+'-'+planes[13]+'-'+planes[14]+'<br />Status: '+planes[16]+'<br />Alt: '+planes[9]+'ft Speed: '+planes[10]+'kts<br />EET: '+planes[17]
});
// On mouse over
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.setContent(this.mouseovertxt);
infowindow.open(map, this);
this.get('line1').setVisible(false);
this.get('line2').setVisible(false);
});
// On mouse out
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
this.get('line1').setVisible(true);
this.get('line2').setVisible(true);
});
For some reason my infoBox'es turn up behind the markers. I know this is supposed to be impossible, but it is never the less the case. Here is the code for my markers:
var yellowCircle={
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: '#faeadd',
strokeColor: 'black',
fillOpacity: 1.0,
strokeWeight: 0.5,
zIndex:-10
};
var yellowBlackCircle={
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: '#faeadd',
strokeColor: 'black',
fillOpacity: 1.0,
strokeWeight: 1.5,
zIndex:-10
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat,Lng),
map: map,
title: name,
icon:yellowCircle,
url:url,
zIndex:-1,
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(yellowBlackCircle);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(yellowCircle);
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = url;
});
And the code for my infoboxes:
var myOptions = {
content: name
,boxStyle: {
border: "1px solid black"
,textAlign: "center"
,fontSize: "12pt"
,fontType: "arial"
,backgroundColor: "#faeadd"
,fontWeight: "bold"
,zIndex:1
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-getTextWidth(name, "bold 12pt arial")/2,-30)
,position: new google.maps.LatLng(49.47216, -123.76307)
,closeBoxURL: ""
,isHidden: false
,pane: "mapPane"
,enableEventPropagation: true
,zIndex:1
};
var infobox = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'mouseover', function() {
infobox.open(map,marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infobox.close();
});
You can see that I have even tried setting the zIndex'es as well, but it has no effect. I believe this is the same question as was asked in google maps infobox above all other content z-index does not work.
I apologize for not attaching a jsfiddle - I couldn't seem to make it work, even after I uploaded the infobox_packed.js to a repository so I could add is as external resource. Instead, here is the whole thing:
http://www.kaarebmikkelsen.dk/wp-content/uploads/2014/05/test2.html
The info-box code is mostly copied from https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html.
Your code came from the example that makes "map labels" and you are attaching the infoBox to the mapPane:
pane: "mapPane"
That will put it behind the markers. If you want it to be an infowindow replacement, copy the code from that example:
pane: "floatPane"
from the documentation you reference
I've seen discussions on this topic on this site, and I've followed the proposed codes as closely as possible without luck. Can anyone tell me if the following code has any chance of being fixed, or if it's breaking a fundamental Google law? What it's trying to do is use one array of rectangles for two maps on the same page using the same geolocation code to position the marker representing the user's location. I have provided 2 sets of options as the zoom, center and functionality of the two maps are different (as is the size of the div in which each is displayed). The first map is zoomed to street level with the user's position in the center; the second is a wide view centered so as to show the full extent of the rectangle layer with the user's location wherever it happens to be on the map. This is a bit more complicated than the examples I've seen, so maybe it can't work and I just have to have two completely separate blocks of code. It would be a shame though to have to repeat the full rectangle array code...
Thanks for any suggestions.
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script><script type="text/javascript">
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var map,map2;
var mapOptions1 = {
zoom: 16,
center: coords,
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapOptions2 = {
zoom: 5,
center: new google.maps.LatLng(0, 0),
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapContainer1"), mapOptions1);
map2 = new google.maps.Map(document.getElementById("mapContainer2"), mapOptions2);
var marker = new google.maps.Marker({
position: coords,
map: map,map2
});
marker.setIcon('sites/default/files/YourLocation_0.png')
var rectangles = [];
rectangles[0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});
rectangles[1]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(aa, bb),new google.maps.LatLng(xx, yy)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example2.com',
clickable: true
});
rectangles[2]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(aaa, bbb),new google.maps.LatLng(xxx, yyy)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example3.com',
clickable: true
});
[.....lots more rectangles....]
for ( i = 0; i < rectangles.length; i++ ){google.maps.event.addListener(rectangles[i], 'click', function() {window.location.href = this.url;
});
}
layer.setMap(map);
layer.setMap(map2);
});
}else {
alert("Geolocation API is not supported in your browser.");
}
This will not work:
rectangles[0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map,map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});
You need to create a separate rectangle for each map (the rectangle can only be on one map at a time) something like this (which creates a two dimensional array, [1] for map, [2] for map2):
rectangles[1][0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});
rectangles[2][0]=new google.maps.Rectangle({
bounds:new google.maps.LatLngBounds(new google.maps.LatLng(a,b),new google.maps.LatLng(x, y)),
map:map2,
fillOpacity: 0,
strokeOpacity: 0,
url: 'http://example.com',
clickable: true
});