Mouse events propagation from marker to underlying map - google-maps-api-3

I have one question,
why dose mouse events related to a map never fire when we are over marker
exp. having a mouse move listener added to a map is never called when we move over a marker
(there is not so called event propagation or bubbling).
This was actully working on maps v2!
Is it a bug, or its changed to this behavior in v3?
Blaze
Here is the example...
If you move around the map, the mapLabel is updated as should be
but if u move over the marker the mapLabel is never updated
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'MOUSEMOVE', function() {
document.getElementByID('moveLabel').innerHtml = 'Mouse map move' + Math.random();
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'MOUSEOUT', function() {
document.getElementByID('markerLabel').innerHtml = '';
});
google.maps.event.addListener(marker, 'MOUSEOVER', function() {
document.getElementByID('markerLabel').innerHtml = 'Mouse over marker';
});
}

All google maps' data that is drawn placed on 7 layers. These layers are called Panes. According to what pane the drawing belongs , it can receive or not receive events. For more information look at the google.maps.MapPanes documentation.
UPDATE: Google maps draws all data on 7 panes. All panes are children of the same parent. For event bubbling it is neccessary that the relation of elements should be parent-child ( then child can bubble the event to parent ),but not sibling-sibling. In sibling-sibling relation, event is received by element with the highest z-index. This is the reason you don't get events bubbled from marker's pane to map's pane.

Related

Know when the dommarkers appear

How to intercept when dommarker appears on the map?
I noticed that if the marker is not visible on the screen, there is not even its html code, I have to change a couple of styles, I need to know when they reappear
I use JavaScript API 3.0
This is a well-hidden feature which is documented here: http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-domicon.html#h-map-domicon
The idea is to add onAttach (and/or onDetach) callbacks to the DOM icon to be notified when a marker comes into the viewport using that icon. Watch out though because the DOM icon you create is always cloned before being put into a marker (because you can use the same DOM icon on multiple markers). The link should already show how it is done, but I'm adding a snippet below.
//Initialization business
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('mapp'), defaultLayers.normal.map, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
//The onAttach function receives the DomElement, the icon object and the
//marker. The element can now be styled...
var onAttach = function(element, icon, marker) {
console.log("marker entering", element, icon, marker);
};
//Create a DomElement to use as marker icon...
var domIconEl = document.createElement("div");
domIconEl.style.width = "32px";
domIconEl.style.height = "32px";
domIconEl.style.marginLeft = "-16px";
domIconEl.style.marginTop = "-16px";
domIconEl.style.borderRadius = "20px";
domIconEl.style.background = "#006";
//Create icon with icon element adding onAttach to the options
var domIcon = new H.map.DomIcon(domIconEl, {
onAttach: onAttach
});
//Creare marker and add to map
var domMarker = new H.map.DomMarker({
lat: 52.3,
lng: 13.8
}, {
icon: domIcon
});
map.addObject(domMarker);

Google map API geolocation after first display of the map

This code takes a big list of (400) markers and adds it to the map, at the end, it shows the whole map including all the markers.
What I have tried to achieve is: when geolocation is available, center the map on location, zoom to level 16 and refresh the map to show it, otherwise, let the whole big map show... I have read and tried many different things, but the geolocation must happen before the map is created. I want to make it happen after. I show you my code here and the temporary link to the working site: http://studioteknik.co/brasseursillimites.com/detaillants/
function initialize()
{
var map = new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in locations) {
var p = locations[i];
var latlng = new google.maps.LatLng(p[1], p[2]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: p[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
Here is a simple example of geolocation. Just add the geolocation code anywhere after the map object is created. If the user doesn't allow geolocation, the map will be shown at the default location / zoom level.
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0,0)
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Geolocation code
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
map.setZoom(16);
});
}
}
initialize();
JSFiddle demo

streetview visible_changed event does not giving panorama position and zoom

I am trying to capture when the pegman icon is dropped on the google maps and send the panorama position and zoom to server. The code below is for listening to visible_changed event. But the thePanorama.getZoom() and getPosition() return undefined.
thePanorama = map.getStreetView();
streetviewChangeListener = google.maps.event.addListener(thePanorama, 'visible_changed', function() {
console.log('visible_changed ');
console.log('streetview panorama position: ' + thePanorama.getPosition() + ' zoom: ' + thePanorama.getZoom());
emitStreetViewEvents({position: thePanorama.getPosition(), zoom: thePanorama.getZoom()});
});
Help?
unfortunately I had a simulare problem, calculating the distance between markers en panorama position to hide and show the markers.
I concluded that with the visible_changed you get the position from before the change.
To get this working I had to add an extra listener for the position_changes.
In my code I have to kinds of markers, one kind linking to panorama's and one linking to external websites, both visible in map mode. In panorama mode the panorama markers are hidden. The website markers are checked with distance from the panorama position and showing only the markers in a certain distance.
google.maps.event.addListener(panorama, 'visible_changed', function() {
if (panorama.getVisible()) {
hideMarkers();
checkZelfstudies();
} else {
showMarkers();
showZelfstudies();
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
checkZelfstudies();
});
https://developers.google.com/maps/documentation/javascript/streetview?hl=nl#StreetViewEvents
Hope this helps you solving your problem. It works in my code.
I just encode something for update the position and zoom when the pegman is dropped in google maps version 3, so, using your variables and adding some others lines, maybe it will help you:
var marker;
var latlng;
var map;
var panorama;
function initialize(position) {
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
thePanorama.setStreetView(panorama);
google.maps.event.addListener(panorama, 'position_changed', function() {
marker.setMap(null);
marker = new google.maps.Marker({
position: panorama.getPosition(),
map: map,
draggable: false
});
map.setCenter(marker.getPosition());
console.log(marker.position.lat());
console.log(marker.position.lng());
});
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log('zoom_changed');
console.log(thePanorama.getZoom());
});
google.maps.event.addListener(panorama, 'pano_changed', function() {
console.log(panorama.getPano());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
console.log(panorama.getPov().heading % 360);
console.log(panorama.getPov().pitch);
});
}
I hope it works for you, greetings.

GoogleMap with KML zooming and Polygon highlighting

This is the code for generating map with a kml file
var myLatlng = new google.maps.LatLng(47.711516,-117.395075);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);
var geoLayer = new google.maps.KmlLayer(
'http://some.kml.url/kmllayer.kml',
{suppressInfoWindows: true,map: map});
geoLayer.setMap(map);
My problem is its always getting at max distance, zoom settings not working even if i try to map.setCenter() call, its still same.
Another question is when i draw polygons on map, is there any way to highlight inside color of it when someone mouse overs it.
2nd question. Draw an initial polygon with a fill opacity of 0 but stroke opacity of 1. Have two event listeners attached to the polygon, for mouseover and mouseout.
google.maps.event.addListener(polygon, 'mouseover', function() {
polygon.setOptions({fillOpacity:0.5});
}
google.maps.event.addListener(polygon, 'mouseout', function() {
polygon.setOptions({fillOpacity:0.0});
}

Google Maps Javascript API V3 - Want to add a marker and return the LatLng of the marker

I have a question relevant to Google Maps API. I am learning how to use the Google Maps API. I can just show the map in the div tag, but what I want is to be able to click on the map and show the marker and return the LatLng of the clicked point.
function initialize(v_lat,v_long,v_place) {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map( document.getElementById("map_canvas") , myOptions );
}
here is the click event example
where you click on map marker place on that point and click on marker which will return the latlng of that location.
try this
var marker;
google.maps.event.addListener(map, 'click', function() {
if(marker==null){
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
alert("latlng" + marker.getPosition());
});
}
});
here is the link for google map v3 you can find all tutorials related to the map
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
http://code.google.com/apis/maps/documentation/javascript/events.html

Resources