I am trying to add custom results to autocomplete and am having some luck, but I cannot make the results clickable. A left or right click does absolutely nothing. Consider the following code:
<input type="text" name="query" id="query">
<script>
var input = (document.getElementById('query'));
var options = [];
city = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(city, 'place_changed', function () {
place = city.getPlace();
});
$("#query").on('input', function()
{
append_places($("#query").val());
});
var new_pac = false;
function append_places(input)
{
if (!new_pac)
{
setTimeout(function()
{
$(".pac-container").append('<div id="new-pac""></div>');
}, 1);
new_pac = true;
}
else
{
$('#new-pac').empty();
}
$("#new-pac").append('<div class="pac-item areasearch">Foo<span class="pac-icon pac-icon-areas"></span><a class="pac-item-query" href="http://www.wherever.com">test</a></div>');
}
</script>
The new entry shows up, looks like a link, but doesn't react when clicked. Any ideas on how to make this happen?
Looking at the Google Maps JS Demo it seems that you are lacking a method to define the preferred viewport on the map to view the place. You need to add code where it will do something wether or not it was able to retrieve a place.
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
}
Here's another example for reference.
Related
im using OpenLayers 5 to display two different layers on the same map. I can see both Markers on the Map with different icons. The code below writes in the popup of one layer. Now my question is: how can i display different Infos on the Popup for each specific layer. For example when the mouse is over the first icon the popup should contain the name of the first layer and when it is over the second different icon it shows the name of the second layer.
I assume i should use map.getFeaturesAtPixel(event.pixel, function (layer1)) or something like this but im facing problems right there
//display the pop with on mouse over event
map.on('pointermove', function (event) {
const features = map.getFeaturesAtPixel(event.pixel);
if (features.length > 0 ) {
var coordinate = event.coordinate;
//get the infos that are going to be displayed in the Pop-up window;
const layerOneName = features[0].get('vehName');
// text written inside the popup
content.innerHTML = '<b>'+layerOneName +'</b>';
overlay.setPosition(coordinate);
}
});
If you use forEachFeatureAtPixel use can add a layer filter function and use that to set the layer
map.on('pointermove', function (event) {
let layer;
const feature = map.forEachFeatureAtPixel(
event.pixel,
function (feature) {
return feature;
},
{
layerFilter: function (candidate) {
layer = candidate;
return true;
}
}
);
if (feature) {
var coordinate = event.coordinate;
//get the infos that are going to be displayed in the Pop-up window;
const layerOneName = feature.get('vehName');
// text written inside the popup
content.innerHTML = '<b>'+layerOneName +'</b>';
overlay.setPosition(coordinate);
}
});
On the client Im getting a bunch of polygons from a postgres database and then I am adding them as an overlay into a layers control. At the moment this is happening via say a menu click, and each time it adds another 'Polygon' checkbox in the control. I need to obviously clear first any old overlays and refresh with a new set of 'Polygon' overlays. How can I remove it programmatically before adding a new overlay?
var controlLayers = L.control.layers(baseMaps).addTo(map);
$.getJSON('/db/getPolys', function (geojsonFeatures) {
console.log('returned polys...',geojsonFeatures.features);
if(geojsonFeatures.features == null){
alert('No polygons where found');
}else{
geojsonLayer = L.geoJson(geojsonFeatures,{
onEachFeature: drawStep1Polys
});
// need to remove before adding anything
// if (geojsonLayer exists){
// controlLayers.removeLayer(geojsonLayer);
// }
controlLayers.addOverlay(geojsonLayer, 'Polygons');
}
});
controlLayers.removeLayer(geojsonLayer)
Remove the given layer from the control.
(note that you will have to keep reference of your previous layers)
Thanks, btw, this was the final code:
var group;
$.getJSON('/FIMS/getPolys', function (geojsonFeatures) {
console.log('returned polys...',geojsonFeatures.features);
if(geojsonFeatures.features == null){
var message = 'No polygons where found';
alert(message);
}else{
if (group) {
controlLayers.removeLayer(group);
}
group = L.geoJson(geojsonFeatures, {
onEachFeature: drawStep1Polys
}).addTo(map);
controlLayers.addOverlay(group, 'Polygons');
map.fitBounds(step1Bounds);
}
});
I am relative new to Angularjs and i am currently working on a project but I hit an obstacle. I've been trying multiple ways to do this but Im all out of idea. Here is a picture of what I want to do:
Map
So on this picture, there are icons and what I want to do is upon clicking an icon, a pop-up window will appear. If you look at the shaded area on top right, that is how I want my the window to be and look like as I already built a template for it and right now the template is static div being displayed.
Here is my code so far:
$scope.cameraData = [];
$scope.markers = [];
$http.get($scope.docRoot + 'public/data/streetcams.json')
.success(function(data) {
$scope.cameraData = data;
for(var marker in $scope.cameraData) {
if($scope.cameraData.hasOwnProperty(marker)) {
$scope.cameraData[marker].icon = cameraIcon;
$scope.cameraData[marker].layer = 'video';
}
}
$scope.markers = $scope.cameraData;
}).error(function(data) {
console.log("Unable to load streecam data file");
});
$scope.windowOption = {
show:false
};
var x, y;
$scope.$on("leafletDirectiveMarker.map.click", function(event, args) {
console.log("this is where the marker is");
console.log (args.latlng.lat, args.latlng.lng);
for ( var marker in $scope.markers) {
x = args.latlng.lat;
y = args.latlng.lng;
if (marker.lat === x && marker.lng === y ) {
$scope.windowOption.show = !$scope.windowOption.show;
}
}*/
});
$scope.closePopupOnClick = function () {
$scope.windowOption.show = false;
};
So $scope.markers contains the information of all icons (title, lat and longitude) and my idea is to retrieve the latitude and longitude of each click event and compare that with latitude and longitude of each marker in the markers array, if they are equal then show to popup window. But it's not working and Im not sure what else to do. Any tips will help!
Thanks!
I have a single page application, using reactjs and react-router. I developed a maps component, and of course with google maps have a memory leak going from screen to screen if I try and cleanup the map on component did mount and rebuild it on component did mount. so I tried this approach:
What is the proper way to destroy a map instance
and re-using the map instance and the node combined with excessive measures to clean things up works well and stabilizes things. For cleanup, I
call clearInstanceListeners on every marker, map, window and document
set map to null on any markers
delete this.map on the component then set it to null
delete this.markers then set it to empty array
The issue i'm having at this point is that when I trigger resize, it's not resizing. after reading several other posts, and making sure i'm triggering after the div is shown, it doesn't resize. However, I have a resize function bound to window.onresize, and have noticed that after resizing the window, and the second time the function is called, the map does resize and center. here's that function:
sizeMapToContainer: function () {
google.maps.event.trigger(this.map, 'resize');
if (this.props.fitBounds) {
this.zoomInOnMarkers();
} else {
this.map.setCenter(new google.maps.LatLng(this.props.center[1], this.props.center[0]));
this.map.setZoom(this.props.zoom);
}
},
and the function for window resize:
window.onresize = function onResize () {
if (this.map) {
this.sizeMapToContainer();
}
}.bind(this);
My render call for react just returns a div, where later on in did mount I append the map div myself.
buildMap: function (nextProps) {
var mapProps;
if (nextProps) {
mapProps = nextProps;
} else {
mapProps = this.props;
}
var centerpoint = mapProps.center;
var zoom = mapProps.zoom || 8;
var center = new google.maps.LatLng(centerpoint[1], centerpoint[0]);
var mapNode = this.refs.map.getDOMNode();
var mapOptions = {
center: center,
zoom: zoom
};
if (mapInstance.map) {
window.tmMap = this.map = mapInstance.map;
//check if the nodes are already there
if (!mapNode.hasChildNodes()) {
mapNode.appendChild(mapInstance.node);
}
this.map.setOptions(mapOptions);
} else {
mapInstance.node = document.createElement('div');
mapInstance.node.classList.add('full-height');
mapInstance.map = new google.maps.Map(mapInstance.node, mapOptions);
window.tmMap = this.map = mapInstance.map;
mapNode.appendChild(mapInstance.node);
this.map.setOptions(mapOptions);
}
this.buildMarkers();
this.setMarkers();
this.bindMarkers();
google.maps.event.addListener(this.map, 'idle', this.onIdle);
},
This component is a nested component.
Please let me know if there is any other code that will help. I am of course using the latest google maps api, using it directly.
I am using the Geolocation Marker Script from the Google Maps Utilities Library V3 in order to display the position of a user.
What I want to achieve (I am a newbie to the Google Maps API!) is:
have the users current coordinates displayed (e.g. in a simple CSS container somewhere on the page)
connect an event to a marker. I should be triggered when the user is close.
Appreciate your help!
To display coordinates to the user, you would need a reference to a DOM Element. Then it's a simple matter of updating the content.
HTML On the Page
<div id="UserCoordinates">Waiting on GPS Position ...</div>
In Script
google.maps.event.addListener(GeoMarker, 'position_changed', function() {
var UserPosition = this.getPosition();
var DisplayElement = document.getElementById('UserCoordinates');
if(UserPosition === null) {
DisplayElement.innerHTML = 'Waiting on GPS Position...';
} else {
DisplayElement.innerHTML =
'Current Position: ' + UserPosition.toUrlValue();
}
});
This will show the user their current position as it changes. If you are going to continue using a full screen map, you'll probably want to implement the UserCoordinates div as a map control. The API Reference has a good overview and multiple examples on this.
Display an info window when the user is within X meters of a location
This is a little tricky because there are multiple scenarios to handle and you don't want the infowindow opening repeatedly as they move within your radius.
Distance calculation
I see you have a distance function in your code, but I recommend using the one in the Spherical Geometry library of the API. You just have to specifically load the library with your api script tag:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true_or_false">
</script>
Then you need to add to the position_changed event handler:
var IsWithinRadius = false; //assume they start outside of the circle
var RadiusInMeters = 1000; //within 1 km
var LocationOfInterest = map.getCenter();
google.maps.event.addListener(GeoMarker, 'position_changed', function() {
var UserPosition = this.getPosition();
var DisplayElement = document.getElementById('UserCoordinates');
if(UserPosition === null) {
DisplayElement.innerHTML = 'Waiting on GPS Position...';
IsWithinRadius = false; //you don't know where they are
} else {
DisplayElement.innerHTML =
'Current Position: ' + UserPosition.toUrlValue();
var IsCurrentPositionInRadius =
Math.abs(google.maps.geometry.spherical.computeDistanceBetween(
UserPosition, LocationOfInterest)) <= RadiusInMeters;
var JustEnteredRadius = !IsWithinRadius && IsCurrentPositionInRadius;
IsWithinRadius = IsCurrentPositionInRadius;
if(JustEnteredRadius) {
//trigger action here.
alert("Within raidus");
}
}
});