I am trying to insert a url/path into google map marker. So I tried google map's url: but no effects. when mouse on the marker it changes to pointer but I can't click or the page doesn't open.
By the way I try to make path to detail screen of each id.
var marker = new google.maps.Marker({
map: map,
icon: 'imgs/marker.png',
label: {
text: estates.data[0].price,
color: "#fff",
},
url: "/pages/{{$est->id}}",
position: {
lat: {{$est->lat}},
lng: {{$est->lng}}
}
});
The way I am using it wrong?
Controller:
public function details($id)
{
$estates = allestates::where('id', $id)->first();
// $rsltActualPrice = (int)$estates->extend / (int)$estates->price;
return view('pages.details', compact('estates'));
}
and Route:
Route::get('/pages/{id}', 'PagesController#details');
You may want to create a route like :
Route::get('/pages/{estateId}', 'yourController#index')->name('map');
and change your url address to this :
url: route('map', ['estateId' => $est->id]),
Related
I am using the #angular/google-maps package to display a Google Map with some markers which like this:
map.html
<google-map>
<map-marker
*ngFor="let marker of markers"
[position]="marker.position">
</google-map>
map.ts
#ViewChild(GoogleMap, { static: false }) map!: GoogleMap;
markers = [] as any;
replaceMarker()
{
this.markers = [];
this.markers.push({
position: {
lat: lat,
lng: lng,
},
options: {
animation: google.maps.Animation.DROP,
},
});
}
This is not the code but identical to the implementation. The problem I am having, is that when I try and remove all markers then add a new one, the old markers never remove from the map, they just stay there and the other markers just pile on top.
My question is: How do I remove all markers before pushing my new ones to my markers array?
I was getting my data from an observable so I just had to move this.markers = [] into the subscribe() function
I'm currently trying to implement Google Maps JavaScript MarkerClusterer on a website.
I'm using Interface Renderer to override a couple of default configuration parameters.
let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster-1.png",
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
}),
};
let config = { map, markers, renderer };
let cluster = new markerClusterer.MarkerClusterer(config);
Please note that I'm adding markerClusterer plugin via unpkg. So I must declare the cluster this way: let cluster = new markerClusterer.MarkerClusterer(config); (as stated in the "Install" section of the official documentation) (see last line of my above code bit).
This code works great, but I'd also like to override gridSize property from Interface GridOptions in order (well, I hope... I'm not even sure this option will give me what I expect; I'm not english native and given description is not totally clear to me...) to get bigger clusters and less individual markers on my map.
I'm struggling for a couple of reasons:
I'm not familiar with they way the code has to be set up,
the documentation is EMPTY and there's NO supplied example code on how to achieve what I want,
can't find any help on stack overflow, tutorials (blogs, social networks, ...). Really, all I could find were 100k of obsolete ways to do it but that doesn't work when you use Interface Renderer. Here's an example:
var markerClusterer = new MarkerClusterer(map, markers, {
gridSize: 10,
maxZoom: 9, // maxZoom set when clustering will stop
imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
});
So I tried several things but nothing is working:
let config = { map, markers, renderer, GridOptions: { gridSize: 10 } };
let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster-1.png",
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
gridSize: 10,
}),
};
let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster-1.png",
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
}),
GridOptions: ({ gridSize = 10 }),
// gridSize: 10,
};
Can anyone help me? Thanks!
Finally:
let renderer = {
render: ({ count, position }) =>
new google.maps.Marker({
label: {
text: String(count),
color: "transparent",
},
position,
icon: {
url: mapOperator.imageBasePath + "pin-cluster-1.png",
},
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
}),
};
let algorithm = new markerClusterer.GridAlgorithm({gridSize: 60});
let config = { map, markers, renderer, algorithm };
let cluster = new markerClusterer.MarkerClusterer(config);
And also, Yes, gridSize property does generate bigger clusters and less individual markers on map if you increase its value (default: 40).
So, I am trying to add a marker on the Google Maps which is part of the functionality of the react.js app I am developing.
const MapCode = document.createElement('script')
MapCode.src =`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`
window.document.body.appendChild(MapCode)
MapCode.addEventListener('load', ()=>{
this.initMap()
this.targetedCityMarker()
})
}
initMap(){
new window.google.maps.Map(this.googleMap.current,{
zoom: 7.5,
center:{ lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
disableDefaultUI: true,
})
}
targetedCityMarker(){
console.log('testing')
new window.google.maps.Marker({
position: { lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
map:this.initMap(),
})
}
The issue is, when I run the code, initMap()works . I can see the map on my page with map centre located at the defined coordinate. For the targetedCityMarker, console.log('testing')can be seen, but somehow the Marker part is not showing up. What has gone wrong here?
In your Marker() initialization, you are trying to use this.initMap() as a map instance, however, that function does not return anything.
Try to return the map instance you initialized from that function:
initMap(){
return new window.google.maps.Map(this.googleMap.current,{
zoom: 7.5,
center:{ lat: this.state.cityCoordinates[1], lng:this.state.cityCoordinates[0] },
disableDefaultUI: true,
})
}
and then you'll be able to use it in your Marker() in a way you are doing it now.
I have a map built with Leaflet which displays markers from a GeoJSON using Leaflet-Realtime plugin and Leaflet-awesome-numbered-marker plugin. However I noticed that the markers color doesn't change dynamically, but it changes if I reload the page. Here's the code so far:
var map = L.map('map', {center: [46.7634, 23.5996], zoom: 14}),
realtime = L.realtime({
url: 'get_markers.php',
crossOrigin: true,
type: 'json'
}, {
interval: 500,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
'icon': new L.AwesomeNumberMarkers({
number: feature.properties.mynumber,
markerColor: feature.properties.status.toLowerCase()
})
});
}
}).addTo(map);
In feature.properties.status is the color code for my markers. I want to change the color of the marker in realtime according to the property in json. Any ideas?
You can use the updateFeature option of L.Realtime. It takes a method with three parameters: feature, oldLayer and newLayer. In there just take the newLayer and use the setIcon method of the marker:
updateFeature: function (feature, oldLayer, newLayer) {
newLayer.setIcon(new L.AwesomeNumberMarkers({
number: feature.properties.mynumber,
markerColor: feature.properties.status.toLowerCase()
}));
}
Unable to test, but that should work.
Reference: https://github.com/perliedman/leaflet-realtime#-options
I'm trying to remove marker from my map before I add a different one but the suggested method, although throwing no error, doesn't remove my marker.
$scope.geo.push({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [$scope.gig.lng, $scope.gig.lat]
},
properties: {
title: $scope.gig.venue,
description: $scope.gig.address + ' ' + $scope.gig.postcode,
'marker-size': 'medium',
'marker-color': '#676767'
}
});
/* show on map */
var markerLayer = L.mapbox.markerLayer().setGeoJSON({
type: 'FeatureCollection',
features: $scope.geo
}).addTo(map);
map.setZoom(13);
map.panTo($scope.geo[0].geometry.coordinates.reverse());
markerLayer.eachLayer(function(m) {
});
According to the documentation I should be able to then call the following to clear all markers but it does nothing.
L.mapbox.markerLayer().clearLayers();
Am I doing something wrong? If not is there a nuclear way of resetting the map?
L.mapbox.markerLayer().clearLayers();
L.mapbox.markerLayer() is a function that creates a new marker layer: this call is creating a new marker layer, and clearing the markers in it.
In your code, you have the lines
var markerLayer = L.mapbox.markerLayer().setGeoJSON({
type: 'FeatureCollection',
features: $scope.geo
}).addTo(map);
You are creating a new marker layer with the L.mapbox.markerLayer() and naming it with the variable markerLayer. So, to clear the markers in this layer, you would call:
markerLayer.clearLayers();