Is there any mouse event on infowindow of google map api v3. Like closeclick event.
Actually i m closing the info window after 3 seconds. but i want that if mouse pointer is over infowindow then it should not be close plesae give me example to do it..
Thank you very much.
My Code is written as follow---
function generateMarkers(locations, is_paid)
{ var marker; for (var i = 0; i < locations.length; i++)
{
var marker;
for (var i = 0; i < locations.length; i++) {
createMarker(new google.maps.LatLng(locations[i][0], locations[i][1]), locations[i][2], locations[i][3], locations[i][4], is_paid);
}
}
function createMarker(pos, name, town, image, is_paid) {
var infowindow;
var marker = new google.maps.Marker({
position: pos,
map: map, // google.maps.Map
title: name,
icon: "images/red.png"
});
infowindow = new google.maps.InfoWindow
({
content: '<div id="dvContent" onmouseover="clearTime()" onmouseout="clearwindow()"><div style="color:black;float:left"><img src="' + image + '" width="50px" height="50px"/></div><div style="color:black;margin-left:60px">' + name + '<br>Address:' + town + '<br>www.somethingcupid.com</div></div>'
});
google.maps.event.addListener(marker, 'mouseover', function () {
if (is_paid != "True") {
document.getElementById("divPopup").style.display = "block";
}
else {
infowindow.open(map, marker);
}
});
google.maps.event.addListener(marker, 'mouseout', function () {
if (is_paid != "True") {
document.getElementById("divPopup").style.display = "block";
}
else {
t = setTimeout(function () { infowindow.close() }, 3000);
}
});
}
function clearTime() {
clearTimeout(t);
}enter code here
function clearwindow() {
setTimeout(function () { infowindow.close() }, 3000);
}
The only InfoWindow event relevant to mouse activity is closeclick.
What you can do is use a <div> within the InfoWindow content and use its mouse events. (There will be an inactive border around the active area.)
Related
I'm trying to create multiple infowindow for multiple marker, But it seem like just refer to last infowindow
This is my code (in for loop, _lat and _long is unique value):
marker.addListener('click', function(){
//markerInfoWindow.close();
markerInfoWindow.setContent('Unsave place', true);
markerInfoWindow.open(map, this);
});
marker.setMap(map);
I tested with marker, marker show correctly but all of them link to the last infoWindow.
How can I make new infoWindow for each Marker?
Update:
This is fully my function after update:
function getListPosition(listMarkers, map){
db.transaction(function(tx){
tx.executeSql('SELECT * FROM Position', [], function(tx, rs) {
var numberOfItems = rs.rows.length;
var markerInfoWindow = new google.maps.InfoWindow();
var marker;
for (var i = 0; i < numberOfItems; i++) {
var _lat = rs.rows.item(i).Lat;
var _long = rs.rows.item(i).Long;
marker = new google.maps.Marker({
position: {lat: _lat , lng: _long}
});
listMarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
markerInfoWindow.setContent('Unsave place', true);
markerInfoWindow.open(map, marker);
}
})(marker));
// marker.addListener('click', function(){
// //markerInfoWindow.close();
// markerInfoWindow.setContent('Unsave place', true);
// markerInfoWindow.open(map, this);
// });
marker.setMap(map);
// Set map center to the last marker
if (i == numberOfItems - 1){
map.setCenter({lat: _lat, lng: _long});
}
}
});
}, function(err){
console.log('Error when get list position. Error code: ' + err.code);
});
}
You need function closure on the loop variables that are needed when the click listener function runs. In your case _lat and _lng. It would probably be simplest to just get those from the marker (this) though:
google.maps.event.addListener(marker, 'click', function(evt) {
markerInfoWindow.setContent('Unsave place', true);
markerInfoWindow.open(map, this);
});
(not tested)
I am using ionic to display benefits data on Google map. It works fine except on click of any marker, it opens the last markup content. Follownig is my google map js code
.controller('BenefitsMapCtrl', function ($scope, LocationBenefits, Utilities, $ionicLoading, $compile) {
$scope.init = function () {
var userId = Utilities.getUserId();
LocationBenefits.getLocationBenefits(userId, function (userBenefits) {
console.log("Got location benefits data for Google mp for user id "+userId);
$scope.userBenefits = userBenefits;
var centerLatlng;
if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
var firstBenefitLocation = $scope.userBenefits[0];
centerLatlng = new google.maps.LatLng(firstBenefitLocation.location.lat, firstBenefitLocation.location.lng);
}
var mapOptions = {
center: centerLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.markers=[];
//Loop in each benefits and place on Google map
if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
for (var i = 0; i < $scope.userBenefits.length; i++) {
var benefit = $scope.userBenefits[i];
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><div><img class='shop-icon' src='" + benefit.shopicon + "' alt='" + benefit.shopName + "'/><span class='item-text-wrap'>" + benefit.shopName + "</span></div><div class='shop-offer'>"+benefit.benefits.short_benefitText+"</div><div class='card'><img class='card-art' src='"+benefit.cardart+"' alt='"+benefit.card+"'/></div></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
//Get location
var locationLatLng = new google.maps.LatLng(benefit.location.lat, benefit.location.lng);
var marker = new google.maps.Marker({
position: locationLatLng,
map: map,
title: benefit.shopName
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
$scope.markers.push(marker);
}
}
//Finally set the map
$scope.map = map;
});
};
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function () {
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function (error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function () {
alert('Example of infowindow with ng-click')
};
});
Issue: On click of any markup on Google map, it always opens the last markup.
Please help.
I had the same problem and spend a lot of time to figure out what's going on so I'd like to add the answer for the future generations,lol.
First of all it's a good idea to refer to official Google maps API docs and take a look at "Events section". I found there one interface of adding event listeners to markers that I never seen before(even after googling this issue for few hours).
marker.addListener('click', function() {});
google.maps.event.addListener(marker, 'click', function () {});
It pointed me out to the idea that when you are trying to do it in the loop using an "old" way, your marker variable is obviously equals to the last element of your markers array. And when event really can be triggered your initialization process is finished what means that your variable has always wrong value in anonymous function at the moment it can be really called. So, again, you didn't passed marker as a parameter to that anonymous event handler.
But you still can do what you want. Just use this.inside your event handler. Bellow is my code sample
marker.addListener('click', function() {
var it = this;
$scope.$apply(function() {
$scope.activeEvent = EventService.getShort($scope.events[it.id]);
});
});
I believe that you can try to use this. in "old-style" interface as well.
I had the same problem and I found the solution here. Apparently, you just have to create a function to create the markers and call that function inside the for loop:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map; //Attach the map to the scope before adding the markers
$scope.markers=[];
var infowindow = new google.maps.InfoWindow();
var createMarkers = function (benefit){
//Info window's content
var contentString = "<div><div><img class='shop-icon' src='" + benefit.shopicon + "' alt='" + benefit.shopName + "'/><span class='item-text-wrap'>" + benefit.shopName + "</span></div><div class='shop-offer'>"+benefit.benefits.short_benefitText+"</div><div class='card'><img class='card-art' src='"+benefit.cardart+"' alt='"+benefit.card+"'/></div></div>";
var compiled = $compile(contentString)($scope);
//Get location
var locationLatLng = new google.maps.LatLng(benefit.location.lat, benefit.location.lng);
//Create marker
var marker = new google.maps.Marker({
position: locationLatLng,
map: map,
title: benefit.shopName
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(compiled[0]);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
//Loop in each benefits and place on Google map
if (typeof $scope.userBenefits !== "undefined" && $scope.userBenefits.length > 0) {
for (var i = 0; i < $scope.userBenefits.length; i++) {
var benefit = $scope.userBenefits[i];
createMarkers(benefit);
}
}
I have a problem with the wrapper for the Google map. The class is set by document ready to display:none. If I click on the link the map must be set on show(). It works, but the map doesn't display right.
Here's a screenshot:
And here is my JSFiddle example.
Here my HTML code:
show map
<div class="advertise-mapper">
<div class="responsiveContaineradv">
<div id="map-canvas" class="map-adver"></div>
</div>
</div>
Here my JS Code:
jQuery(document).ready(function() {
jQuery(document).on("click", ".advertise-map", function(e) {
e.preventDefault();
jQuery('.advertise-mapper').show();
});
});
var map;
function initialize() {
var locations = [
['<h4>BMX Golden MILE 20 Fahrrad</h4>250.00 €<br>zur Kleinanzeige', 51.4627921, 6.9787572],
['<h4>Apple Macbook Air 13 A1466 Juni 2013</h4>800.00 €<br>zur Kleinanzeige', 51.665041, 7.631431],
['<h4>Apple iPod nano 16 GB Grün 6. Generation</h4>60.00 € VB<br>zur Kleinanzeige', 51.5096015, 7.377755],
];
var myLatlng = new google.maps.LatLng(51.513587, 7.465298);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var infowindow = new google.maps.InfoWindow({
maxWidth: 360
});
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var markers = new Array();
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation: google.maps.Animation.DROP
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function autoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
// Fit these bounds to the map
map.fitBounds(bounds);
}
autoCenter();
}
google.maps.event.addDomListener(window, 'load', initialize);
How can I make the map display correctly when shown?
I would make a few small corrections, the most important of which goecodezip mentioned in the comments.
In your onclick of .advertise-map, add the map resize (important) and autoCenter (optional).
jQuery(document).on("click",".advertise-map",function(e){
e.preventDefault();
jQuery('.advertise-mapper').show();
google.maps.event.trigger(map, "resize");
autoCenter();
});
Next, I'd make 'markers' a global variable:
var map;
var markers = new Array();
Finally, I'd move the autoCenter() function out from the initialize function.
With all those changes, I believe this is what you're looking for: http://jsfiddle.net/2xn7wywo/22/
I have a problem with InfoWindow. I have an ajax function that retrieves data via JSON, but I can not get close InfoWindow automatically when you open another.
My code is this:
var mapOptions = {
center: new google.maps.LatLng(44.49423583832911, 11.346244544982937),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mappa_locali"),mapOptions);
$.ajax({
type:'GET',
url:"locali_json.php"+urlz,
success:function(data){
var json = JSON.parse(data);
for (var i=0; i<json.length; i++) {
point = new google.maps.LatLng(json[i].latitudine,json[i].longitudine);
var infowindow = new google.maps.InfoWindow;
infowindow.setContent(''+json[i].nome_locale+'<br>'+json[i].address);
addMarkerz(point,infowindow);
}
}
})
}
function addMarkerz(point,infowindow) {
position: point,
map: map
});
google.maps.event.addListener(marker,'mouseover',infoCallback(infowindow, marker));
markers.push(marker);
infos.push(infowindow);
}
function infoCallback(infowindow, marker) {
return function() {
infowindow.close();
infowindow.open(map, marker);
};
}
Does anyone know where decreased mistake? Or do you have any advice for me?
The suggestion is only create one infowindow (in the global scope), reuse it and change its contents when a marker is clicked, close it if the user clicks on the map.
code snippet (removes the dependency on the AJAX call):
// global variables
var map;
var markers = [];
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.49423583832911, 11.346244544982937),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mappa_locali"), mapOptions);
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
point = new google.maps.LatLng(json[i].latitudine, json[i].longitudine);
var infowindowHtml = '' + json[i].nome_locale + '<br>' + json[i].address;
addMarkerz(point, infowindowHtml);
}
}
function addMarkerz(point, infowindowHtml) {
var marker = new google.maps.Marker({
position: point,
map: map
});
google.maps.event.addListener(marker, 'mouseover', infoCallback(infowindowHtml, marker));
markers.push(marker);
}
function infoCallback(infowindowHtml, marker) {
return function() {
infowindow.close();
// update the content of the infowindow before opening it
infowindow.setContent(infowindowHtml)
infowindow.open(map, marker);
};
}
var data = JSON.stringify([{
latitudine: 44.494887,
longitudine: 11.3426163,
id_locale: "0",
nome_locale: "Bologna",
address: "Bologna, Italy"
}, {
latitudine: 44.4946615,
longitudine: 11.314634999999953,
id_locale: "0",
nome_locale: "Quartiere Saragozza",
address: "Quartiere Saragozza, Bologna, Italy"
}]);
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#mappa_locali {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mappa_locali"></div>
function infoCallback(infowindow, marker) {
return function() {
infowindow.close();
infowindow.open(map, marker);
};
}
should be changed to
function infoCallback(infowindow, marker) {
return function() {
//Close active window if exists
if (activeWindow != null) {
activeWindow.close();
}
//Open new window
infowindow.open(map,marker);
//Store new window in global variable
activeWindow = infowindow;
};
}
and declare activeWindow as a global variable in your .js file as var activeWindow.
I think I have a simple solution. I just save the last open mark. On the next click first of all I close the last mark.
var markers = [];
var infowindows = [];
function addMarkes(facilityID) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < variants.length; i++) {
var v = variants[i];
var position = new google.maps.LatLng(v.Lat, v.Long);
bounds.extend(position);
markers[i] = new google.maps.Marker({
position: position,
title: v.Title,
map: map,
animation: google.maps.Animation.DROP,
icon: v.Icon,
infoWindowIndex: i //synchronize with infoWindows
});
var localContent = '<div><span class="address">' + v.Address + '</span></div>';
infowindows[i] = new google.maps.InfoWindow({
content: localContent
});
//Just for multiple marks.
if (variants.length > 0) {
var lastOpen = -1; //Save the last open mark
google.maps.event.addListener(markers[i], 'click', function (innerKey) {
return function () {
//Close the last mark.
if (lastOpen > -1) {
infowindows[lastOpen].close();
}
infowindows[innerKey].open(map, markers[innerKey]);
lastOpen = innerKey;
}
}(i));
}
}
map.fitBounds(bounds);
}
I have retrieved the data from xml..Generated Sidebar. I want to open infowindow on click on the sidebar.. Tried so many examples and codes but not succeeded... Can you please suggest what should be function declaration for myclick function:
Below i am mentioning my code...I will be grateful to you if any one can help!!
var gmarkers = [];
function load() {
var side_bar_html = "<div class=\"pro_curved-hz-2\"><div class=\"pro_text-shadow\" style=\"height: 250px;overflow-x:hidden;overflow-y: scroll;\">";
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo $SelectedLatitude; ?>,<?php echo $SelectedLongitude; ?>),
zoom: <?php echo $Zoom; ?>,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("/map.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var count=markers.length;
if(count>0)
side_bar_html += '<span class=\"pro_info pro_info-indent pro_info_success\">' + count + ' result found!! </span><div class=clear></div>';
else
side_bar_html += '<span class=\"pro_info pro_info-indent pro_info_warning\"> No Result found!! </span><div class=clear></div>';
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var link= '/Place';
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var Mainicon = customMainIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: Mainicon.icon,
shadow: Mainicon.shadow,
animation: google.maps.Animation.DROP,
});
gmarkers[i] = marker;
side_bar_html += '<div class=\"pro_curved-hz-2-1\" onclick="myclick('+i+');" onmouseover="mymouseover('+i+');" onmouseout="mymouseout('+i+');" ><div class=\"pro_text-shadow\"><a href=' + link + '>' + name + '</a><br>' + address + '</div></div>';
bindInfoWindow(marker, map, infoWindow, html, side_bar_html);
}
side_bar_html += "</div></div>";
});
}
function myclick(index) {
}
function mymouseover(i) {
gmarkers[i].setAnimation(google.maps.Animation.BOUNCE);
}
function mymouseout(i) {
gmarkers[i].setAnimation(null);
}
function bindInfoWindow(marker, map, infoWindow, html, side_bar_html) {
document.getElementById("SideBar").innerHTML = side_bar_html;
google.maps.event.addListener(marker,'mouseover', function() {
//marker.setAnimation(google.maps.Animation.BOUNCE);
//setTimeout(function(){ marker.setAnimation(null); }, 750);
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
google.maps.event.addListener(marker,'mouseout', function() {
infoWindow.setContent(html);
infoWindow.close(map, marker);
});
var p=<?php echo $Zoom; ?>;
google.maps.event.addListener(marker, 'click', function() {
p+=1;
if(p>=20)
{
infoWindow.setContent(html);
infoWindow.open(map, marker);
}
else
{
map.setZoom(p);
map.setCenter(marker.getPosition());
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
Here is an example that does what you are requesting (with function closure and a createMarker function).
Here is an example that doesn't use function closure.