I'm adding markers to my Google Map like this:
function createMarker(location, info) {
var marker = new google.maps.Marker({
map: map,
position: location
});
google.maps.event.addListener(marker, "click", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: info, title: 'test' });
infowindow.open(map, marker);
});
}
How can I access and open the markers without a manual click on the map?
I tried to save the marker object and do a marker.click() but it doesn't seem to work.
Any ideas?
Added:
var markers = new Array();
function getMarkerbyLocation(location) {
for (var i = 0; i < markers.length; i++) {
if (markers[i].getPosition().lat() == location.lat() && markers[i].getPosition().lng() == location.lng())
return markers[i];
}
}
Modified:
function createMarker(location, info) {
var marker = new google.maps.Marker({
map: map,
position: location
});
google.maps.event.addListener(marker, "click", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: info });
infowindow.open(map, marker);
});
// Modification here!
markers.push(marker);
}
Some event on the page executes the following:
google.maps.event.trigger(getMarkerbyLocation(new google.maps.LatLng(53.43306, 9.98556)), 'click');
Related
I need to open an infoWindow on customMarker.
The InfoWindow is not opening. "Click" doesn't work on:
$google.maps.event.addDomListener(overlay, 'click', function () {
console.log("test");
iw.open(map, this);
});
Here is my code:
$.getJSON(jsonShops, function(places) {
for (var i = 0, index = 0; i < places.shops.length; i++, index++) {
var bounds = new google.maps.LatLng(places.shops[i].lat, places.shops[i].lng);
var overlay = new MarkerSOverlay(bounds, alphabet.charAt(index), map);
var iw = new google.maps.InfoWindow({
content: "Simple",
position: bounds
});
google.maps.event.addDomListener(overlay, 'click', function () {
console.log("test");
iw.open(map, this);
});
}
Change addDomListener to addListener
google.maps.event.addListener(overlay, 'click', function () {
console.log("test");
iw.open(map, this);
});
addListener is for google.maps objects (like Markers), addDomListener is for DOM nodes.
i have this code to display a google map:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
Open Info Window
That's not the final code, because i want add more markers.
The problem is, that i need external links to open the info window of a marker.
For Example:
Link 1 opens the info window from marker 1
Link 2 opens the info window from marker 2
etc...
I need a link something like this:
Open Info Window One
Here is my code in jsfiddle:
http://jsfiddle.net/fJ4jG/3/
I found couple of solutions, but i don't know how to use this code together with my code.
It should work like this:
http://www.geocodezip.com/v3_MW_example_map2.html
Thanks for every help!
What that example does is it creates an array where it stores the markers. So when the markers are created, they get pushed to that markers array. When you click on the link you send an index with the function that is a reference to the marker in the array.
So JavaScript looks like this:
var markers = [];
// The array where to store the markers
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
// Push the marker to the 'markers' array
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
function myClick(id){
google.maps.event.trigger(markers[id], 'click');
}
And in your HTML a tag you add the myClick function like this:
Open Info Window
Example: http://jsfiddle.net/fJ4jG/9/
As in my example.
add a global array to save references to the google.maps.Marker objects:
var gmarkers = [];
push the markers onto that array as you create them
gmarkers.push(marker);
trigger the "click" event on the desired marker:
Open Info Window
jsfiddle
use this code i already tried it
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(locations[i][0]);
infoWindow.open(map, marker);
});
I'm trying to have custom infowindows float above markers, however I noticed that only one marker can be opened at any one time. Is there a workaround to this?
Here's the code I have produced at the moment:
downloadUrl("AllActivityxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("venue_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))
);
var infowindow = new google.maps.InfoWindow();
var html = "<b>" + point + "</b>hello <br/>" + type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map,marker);
});
}
});
And when you check this map, notice that I cannot open more than 2 infowindows at once. Why is that?
There is no limitation implicit to the Google Maps API v3 that makes only one InfowWindow available at a time. You need to write your code to do that. If you want an InfoWindow for each marker, make one.
Some thing like (not tested):
function createMarker(latlng, html) {
var contentString = html;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
I am trying to display InfoWindow but the problem is that I'm only able to see the last record of JSON.
onmouseover shows the title of other 2 markers but their InfoWindows are not opening. Please suggest how to fix this code
var infoWindow = new google.maps.InfoWindow();
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
}
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
Never mind, I was very dumb to not see it first. I was adding click event after the loop. All I needed to do was this.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0, length = json.length; i < length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
i.e. closure had to be inside the loop
GoogleMap Markers are Not Clickable on the Mobile Devices (Touch Screens).
But, ok on any PC, so I can't figure out what is the point.
Here is my code:
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(60.037760, -44.100494),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locations = [
['4lvin', 60.074433, -44.011917],
['5irius', 60.037760, -44.100494]
];
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
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h2>'+locations[i][0]+'</h2>\n<a>Read more..</a>');
infowindow.open(map, this);
}
})(marker, i));
}
But then, when i use the following codes (the formal way of google for "google.maps.event.addListener"), Markers are showing only the same InfoWindows.
var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
new google.maps.event.addListener( marker, 'click', function() {
infowindow.open(map,this);
});
The problem is because you're doing a loop, you need to use a closure, otherwise all markers will just get the content you want to associate with the last marker. Your first bit of code is doing this correctly. Suggest you change to do the same again:
var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
google.maps.event.addListener( marker, 'click', function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map,this);
}
})(marker, i));
I found the following solution :
1. create marker with option
"optimized: false" : ex => new google.maps.Marker({..., optimized: false, ...});
adding another event listener
google.maps.event.addDomListener(marker, "click", function() {...});
From google forum