thanks again for the great here map API.
We are currently struggling how to determine if a marker or the map itself was clicked. We have added event listeners to both the map and the marker (added as group).
When we now click on the map, both eventlisteners are fired.
Do we miss something in the API docs? I think there should be a way to get correct information of what was clicked.
Map event listener
map.addEventListener('tap', (event) => {
action(event);
});
Marker event listener
marker.addEventListener('tap', (event) => {
action(event);
});
Thanks in advance.
Better stay with a single listener on the map object.
The key thing is to check the instance of the event.target :
map.addEventListener('tap', event => {
if (event.target instanceof H.map.Marker) {
// Some action. Typically, you want to use the data that you may have referenced
// in the marker creation code, or get the coordinates. Here we log the data
console.log( event.target.getData() );
}
}
Hey this small example works fine for me, I see in the docs there is not listener for tap, these are the supported listeners.
https://developers.google.com/maps/documentation/javascript/events
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map, marker;
function initMap() {
var myLatLng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
map.addListener('click', (event) => {
console.log(event, 'from map')
});
marker.addListener('click', (event) => {
console.log(event, 'from marker')
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
</script>
</body>
</html>
Related
How to listen for different click events in mapbox using JavaScript? The following is the code for displaying a map using map box.
Can someone suggest how to listen to click events that differentiates land from water bodies?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGphZWJvIiwiYSI6ImNrbzJoYjhodTAxeDUyb211eTF2anZ0bmQifQ.62m9LNQhEPZNCwqxEW9pPQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
I'm being able to listen to click events using the following code:
map.on('click', (e) => {
console.log(e.lngLat)
})
But is there a way to differentiate coordinates land from water bodies?
if you try this:
map.on('load', function () {
let style = map.getStyle();
})
then you can see all the details about the style such as sources, layers, glyphs and etc .
Also for listening to click events on different layers, you can just use:
map.on('click', 'land', function (e) {
// some code
});
or you can query the rendered features within multiple layers by code below:
map.on('click', function (e) {
let featureSelected = map.queryRenderedFeatures(e.point, {layers: ['land', 'water']
});
});
This is the code I have, based on the example at https://developers.google.com/maps/documentation/javascript/examples/event-simple , but instead of zooming in when clicked on a marker, I want to show a messagebox (alert()):
<!DOCTYPE html>
<html>
<head>
<title>Simple click event - modified</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatlng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to show alert'
});
marker.addListener('click', alert('Hello World!'));
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap" async defer>
</script>
</body>
</html>
Of course, instead of YOUR_API_KEY , I filled in my own API key from Google Maps API v3.
Whenever I load this page, the alert shows as soon as the page is loaded, and clicking on the marker has no effect at all.
The problem is in the addlistener, the command for the messagebox has to be in between a function() { ... }:
marker.addListener( 'click', function() { alert('Hello World!'); } );
Will solve the problem!
I've got a map in a hidden div that gets revealed by a button press. I was initially having issues but they were fixed by triggering a resize event. My issue now is that the map isn't centered on the position that I initialise the map with.
I want to add a map.setCenter(?) call in to the resize or bounds changed event listener but they never seem to be called. I've put alerts in each one to test but nothing happens.
EDIT: Example as requested...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#theButton {
position: absolute;
top: 0;
left: 400px;
padding: 10px;
background-color: orange;
z-index: 100;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="theButton" onclick="resizeMap();">Click Me</div>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: 51.320151, lng: -0.555658};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Test Location!'
});
var getCen = map.getCenter();
var currentMapCenter = null;
google.maps.event.addListener(map, 'resize', function () {
currentMapCenter = map.getCenter();
alert("Resizing");
});
google.maps.event.addListener(map, 'bounds_changed', function () {
if (currentMapCenter) {
// react here
map.setCenter(currentMapCenter);
alert("Centering");
}
currentMapCenter = null;
});
}
function resizeMap() {
alert("Clicked");
google.maps.event.trigger(map, 'resize');
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
</body>
</html>
I have tested more deeply your code there is a problem with the scope of the var map
change declaration in this way (in window scope outside the function initMap local scope)
<script>
var map;
function initMap() {
var myLatLng = {lat: 51.320151, lng: -0.555658};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
........
......
Otherwise map is not correctly referenced in ths other function eg:
function resizeMap() {
google.maps.event.trigger(map, 'resize');
In this function if you don't change the var declaration map is not referenced and the nothing can be triggered
I am a very new person to the google maps and javascript. What i am trying to achieve is that when i load a google map the user should be able to add a marker/pin on any location he wishes via click. I am able to do this now what i am trying to add is that if a user clicks the pin gets added there should also be a description window which user could add on that pin. Say when i click on a location to add a pin i should also be able to insert some description like "my home" etc.Below is my code so far. Thanks anyways.
<!DOCTYPE html>
<html>
<head>
<title>Accessing arguments in UI events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You need to add on click listener to your marker to open an info window when you click on your marker.
Create your infowindow after where you created your marker:
var infowindow = new google.maps.InfoWindow({
content : 'Test Content'
});
and after that, add the listener:
google.maps.event.addListener( marker, "click", function() {
infowindow.open( map, marker );
});
I'm experimenting with QtWebkit and Google Maps. The problem I've run into is calling C++ slots from the QWebView.
The page displayed in the QWebView is a modified Google Maps example:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Event Simple</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'test'
});
google.maps.event.addListener(marker, 'click', function() {
//if (map.getZoom() == 8) {
// map.setZoom(4);
// } else {
// map.setZoom(8);
// }
window.maiWi.showList();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
maiWi is the QMainWindow object which contains the slot showList() I want to call and which has been added to the Javascript window object.
If I add another element to the web page with the attribute onclick="maiWi.showList()", then the slot gets called and everything is well. However, I want to call the slot when the Maps marker gets clicked. The marker, however doesn't seem to respond to click events in QWebView. Even the commented-out example code doesn't work.
In Chrome, the event listener gets called and does what it's supposed to, but in QWebView nothing happens.
It turns out that I should turn off optimized rendering for map markers. When adding optimized:false to the marker declaration, then things start to work:
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
optimized: false,
title: 'test'
});