I am using Infobox with Google Map V3 (attached image). While clicking on Infobox, I want to go to a details page. But I am not able to add a click listener on the infobox. Here is the code I am using:
This is my infobox config:
var ib = new InfoBox({
alignBottom : true,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-125, -50),
zIndex: null,
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation:false
});
And I added listener to this infobox like this:
google.maps.event.addListener(ib, 'domready', function() {
if(Ext.get(ib.div_)){
Ext.get(ib.div_).on('click', function(){
console.log('test on click')
}, this);
Ext.get(ib.div_).on('mousedown', function(){
console.log('test on click')
}, this);
}
});
While enableEventPropagation = false, the event doesn't propagate to MAP but no event is working on the infobox.
While enableEventPropagation = true, the events (click, mousedown) works but clicking on other part of the infobox, it takes me to map or another marker.
Any idea how to solve this?
You need to add domready event to infobox's eventListener not to google maps' one. Only after infobox's html is on screen, you can bind event. To prevent multi event binding, close other infobox before you load a new one.
infobox= new InfoBox();
google.maps.event.addListener(marker, 'click', function() {
infobox.close();
infobox= new InfoBox({ ... });
infobox.open(map, this);
infobox.addListener("domready", function() {
$("#target").on("click", function(e) { /* do something */ });
});
});
You can attach a listener to whatever is the content of your InfoBox.
var boxText = document.createElement('div');
var myOptions = {
content: boxText,
...
}
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
boxText.setAttribute('onclick', 'alert("InfoBox clicked")');
Would that work for you ?
Related
This code fine work in all browser, except firefox browser.
Event click don't work.
var marker = new RichMarker({
position: new google.maps.LatLng( _latitude, _longitude ),
map: map,
draggable: draggableMarker,
content: markerContent,
flat: true
});
google.maps.event.addListener(marker, "click", function(event) {
alert(this.position);
});
How I can fix that? Thx.
The issue seems to be line 615 of http://googlemaps.github.io/js-rich-marker/src/richmarker.js
this.markerWrapper_.setCapture(true);
When you add a click-listener to a marker internally the click-event will be triggered when you click on the content of the marker. With the above line the click-event will fire for the wrapper of the content only(happens when a marker is draggable).
You'll need to modify the function addDraggingListeners_, set it to:
RichMarker.prototype.addDraggingListeners_ = function() {
var that = this;
this.draggingListeners_ = [
google.maps.event.addDomListener(window, 'mousemove', function(e) {
that.drag(e);
}, true),
google.maps.event.addDomListener(window, 'mouseup', function() {
that.stopDrag();
}, true)
];
};
My project is related with gps and tracking system. I draw geofences on google maps api v3 with drawingManager. And i need a button, clicking on which it will be show/hide all drawingManager figures. In my project i also use angularJS. I have 2 different directives. In 1-st i declare drawingManager
var polyOption = {
fillColor: '#ffff00',
fillOpacity: 0.4,
strokeWeight: 1,
clickable: true,
editable: true,
zIndex: 1
};
drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
circleOptions: polyOption,
rectangleOptions: polyOption,
polygonOptions: polyOption,
polylineOptions: polyOption,
});
scope.geozonesConfig.tempDrawManagerVar = true;
scope.geozonesConfig.tempDrawManagerHide = false;
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// To hide:
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
scope.$apply (function () {
scope.geozonesConfig.showGeozoneConfig = true;
});
});
setSelection(newShape);
});
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
buildColorPalette();
there is my button. i used ng-click:
<i class="icon-globe"></i>
`and my function is located into another directive:
scope.onGeozoneClick = function () {
alert('Show/Hide all figures');
};
How can i show/hide these drawingManager figures? Thanks.
EDIT: Update from OP's reply as an Answer
How can i do it in js? I dont know how to refer to my figures. And there is no any method in google maps api for these figures, as i know. Now i tried to do it using visible property of figuresOptions:
var anchorShowHideFigure = true; var polyOption = {visible = anchorShowHideFigure };
and then i want change flag to false after click on button. If i will write in my 1-st directive:
function showHideDrawingFigures () { anchorShowHideFigure = false; };
in console i get: "showHideDrawingFigures is not definied". if i will write it into 2-nd directive i get: "anchorShowHideFigure is not definied" i get this, because my html file use 2-nd directive. sorry if i explained intricately –
Checkout ng-show & ng-hide directives for this.
Create one flag say showFigures, in $scope. For toggling the fla
$scope.onGeozoneClick = function () {
$scope.showFigures = false;
};
In HTML,
<div ng-show="showFigures"></div>
I have a google map background on one of the pages to my website through javascript, but I noticed it doesn't always load. Instead part of it will appear as a small square in the upper lefthand corner (as if it stop while tiling the page). If I refresh my screen or even resize my window, it will load and then I can't recreate the problem for a while.
It happens most consistently when first visiting the website, obviously a problem for new visitors we want to attract the website.
Any ideas on making it load better? Or ideas on what the problem is?
Code:
/*
Global
*/
var map;
function initialize() {
/*
Basic Setup
*/
var latLng = new google.maps.LatLng(39.726020913196265, -105.00015970000004);
var myOptions = {
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
draggable: true,
disableDoubleClickZoom: true, //disable zooming
scrollwheel: false,
zoom: 16,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP // ROADMAP; SATELLITE; HYBRID; TERRAIN;
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/*
MARKER
*/
/*
//for custom image
var image = 'yourflag.png';
icon: image
//for animation marker drop
animation: google.maps.Animation.DROP
*/
var markerlatlng = new google.maps.LatLng(39.726020913196265, -105.00015970000004);
var marker = new google.maps.Marker({
position: markerlatlng,
title:"Hello World!"
});
marker.setMap(map);
/*
INFO Bubble
*/
myInfoWindowOptions = {
content: '',
maxWidth: 275
};
infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,marker);
});
google.maps.event.addListener(marker, 'dragstart', function(){
infoWindow.close();
});
infoWindow.open(map,marker);
}//end initialize
/*
onLoad
*/
$(function(){
initialize();
$("#zo").click(function(event){
event.preventDefault();
map.setZoom( map.getZoom()-1 );
//map.setCenter(new google.maps.LatLng(9.825183,15.1975769));
});
$("#zi").click(function(event){
event.preventDefault();
map.setZoom( map.getZoom()+1 );
});
$("#gt").click(function(event){
event.preventDefault();
var lt1 = new google.maps.LatLng(36.114739, -115.171840);
//map.setZoom( 16 );
map.panTo(lt1);
});
});
First of all, I love the scrolling effect of the page, but looking at the code and the page source, I can't completely tell how your onload event fires. I too sometimes had problems with certain pages not loading completely on certain browsers.
Have you tried attaching multiple events to load the background?
function doLoad() { // this is what executes when page is to load
initialize();
}
//different event handlers for page load
if ( window.addEventListener ) {
window.addEventListener( "load", doLoad, false );
}
else if ( window.attachEvent ) {
window.attachEvent( "onload", doLoad );
}
else if ( window.onLoad ) {
window.onload = doLoad;
}
else window.setTimeout('doLoad', 1000);
So i have a V3 map which is initialised like this:
function init() {
var mapCenter = new google.maps.LatLng(51.5081289,-0.128005);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 6,
'center': mapCenter,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
});
and a load of markers that look like this:
var marker25837500 = new google.maps.Marker({
map: map,
pop_title: 'blah blah',
pop_wind: 'more blah',
zIndex: 999,
icon: 'images/map_icons/s6.png'
});
google.maps.event.addListener(marker25837500, 'click', onMarkerClick);
and lastly i have a function to open the infowindow on he click of each maker:
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick = OpenInfoWindow;
function OpenInfoWindow() {
var marker = this;
infoWindow.setContent('<h3>' + marker.pop_title + '</h3>' +
marker.pop_body);
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
My question is, what do i need to do to make a particular marker (say marker25837500) show its infowindow when a inside the page is clicked - perhaps something like:
<div id="marker25837500">click to see infoWindow!</div>
I'm sure it's easy but i just can see my way though it!
Thanks
You might use trigger event.
$('#marker25837500').click(function () {
google.maps.event.trigger(marker25837500, 'click')
})
Check this- https://developers.google.com/maps/documentation/javascript/reference#event
Edit: Also noticed that you are calling onMarkerClick() when marker25837500 is clicked, but you named the other function OpenInfoWindow() so you might need to change that too.
You don't have to do anything unusual or simulate a click on the marker; just make sure the OpenInfoWindow function can be reached:
//This is the simple case:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", OpenInfoWindow );
//Or if you have other things that you want to accomplish when this occurs:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", function() {
OpenInfoWindow();
//Do other stuff here
});
As long as the InfoWindow is in scope (can be reached when the OpenInfoWindow function is called), this should work fine.
My streetview is embedded into an infowindow box. The panorama is loaded after the infowindow is domready, with addListener event.
I would like to modify the object in event.addListener(infowindow, 'domready', function() and replace it with the jQuery UI Dialog object $('#dialogStreetview') that is open when the marker is clicked. I try with event.addListener($('#dialogStreetview'), 'domready', function() and other things but nothing is trigger when the dialog is domready.
How to point to this jQuery dialog object (jQuery UI event, other jQuery or JS action) ?
Thank you.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
$( "#dialogStreetview" ).dialog();
});
var pano = null;
//INFOWINDOW
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false);
}
var pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
enableCloseButton: false,
addressControl: false,
visible: true,
linksControl: false
});
You could use the dialogopen event of the dialog :
$("#dialogStreetview").on("dialogopen", function(event, ui) {
instead of
google.maps.event.addListener(infowindow, 'domready', function() {
The dialogopen event is triggered when the jQuery UI Dialog is opened .... docs here