I have the following code, but it is not working, the link only is showed on the last point (Argentina), some help?
<div id="map" style="width: 980px; height: 420px;margin:10px 0px 30px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);
var marker = new google.maps.Marker({
position: usa,
url: '/destinos/exibir/pais_id/3',
title: 'Estados Unidos',
map: map
});
var marker = new google.maps.Marker({
position: brasil,
url: '/destinos/exibir/pais_id/2',
title: 'Brasil',
map: map
});
var marker = new google.maps.Marker({
position: argentina,
url: '/destinos/exibir/pais_id/1',
title: 'Argentina',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
</script>
jsfiddle demo with modification augmenting #hsz example:
The problem is you have marker declared 3 times, and attach only click event on the one that is declared last. So, you must declare 3 different name for 3 different markers and attach each of them with onclick event. Better if you do it in an array or something
var markers = [];
markers[0] = new google.maps.Marker({
position: usa,
url: '/destinos/exibir/pais_id/3',
title: 'Estados Unidos',
map: map
});
markers[1] = new google.maps.Marker({
position: brasil,
url: '/destinos/exibir/pais_id/2',
title: 'Brasil',
map: map
});
markers[2] = new google.maps.Marker({
position: argentina,
url: '/destinos/exibir/pais_id/1',
title: 'Argentina',
map: map
});
for ( i = 0; i < markers.length; i++ ) {
google.maps.event.addListener(markers[i], 'click', function() {
window.location.href = this.url; //changed from markers[i] to this
});
}
You're giving each marker the same variable name, so I think the reference 'marker' will only point to the last one (Argentina).
You could try giving them separate names and binding the listener to each one separately.
Just adding this answer for future reference for anyone if they need it
Send the details to another createMarker function
createMarker(pos,title,weburl)
{
marker = new google.maps.Marker({
position: pos,
title: title,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = weburl;
});
}
Thanks Tom Elliott for pointing out the issue, i was using a logic similar to kjy112
Related
I have an error
location_marker.addListener is not a function
map initialization
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 31.7917 , lng: 7.0926},
zoom: 3,
mapTypeId: 'roadmap'
});
running through a list of locations and placing a marker for each
var location_marker;
for (var i = 0; i < locations.length; i++) {
location_marker = markers.push(new google.maps.Marker({
map: map,
title: locations[i].title,
position: locations[i].location
}));
}
create an info window that displays every marker's title
var infowindow = new google.maps.InfoWindow({
content: location_marker.title
});
location_marker.addListener('click', function() {
infowindow.open(map, location_marker);
});
Based on the code you provided, which does not seem complete, I assume the following.
Your var locationMarker saves the result from markers.push which returns the length of the array to which an object (google.maps.Marker) was pushed.
Because locationMarker is a Number, it has no addListener method. You might want to do something like this instead:
location_marker = new google.maps.Marker({
map: map,
title: locations[i].title,
position: locations[i].location
})
markers.push(location_marker);
I got infowindows working, but for some reason if I click the same marker multiple clicks it opens multiple of the same infowindow. I have a feeling it has to be something with my code, but I cant quite put my finger on what it is. Any help is appreciated.
var map;
var markers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
center: new google.maps.LatLng(33.6894120, -117.9872660),
mapTypeId: 'roadmap',
disableDefaultUI: true
});
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map,
type: feature.type,
title: feature.title,
description: feature.description
});
marker.addListener('click', function() {
map.setCenter(marker.getPosition());
var infoWindow = new google.maps.InfoWindow({
map: map,
pixelOffset: new google.maps.Size(0, -60)
});
infoWindow.setContent(marker.description);
infoWindow.setPosition(marker.position);
google.maps.event.addListener(map, 'drag', function() {
infoWindow.close();
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
});
markers.push(marker);
}
filterMarkers = function(getType) {
//console.log(getType);
for (var i = 0; i < markers.length; i++) {
if (markers[i].type == getType || getType == "") {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type1',
description: 'Description1'
},{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type2',
description: 'Description2'
},{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'type3',
description: 'Description3'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
$(document).ready(function(){
initMap();
});
If you don't want an infowindow created every time you click on the marker, don't create a new one every time you click on the marker, create one for the marker (or one for the map, if you only ever want one open), and open it in the click listener.
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
map: map,
type: feature.type,
description: feature.description
});
// create infowindow for the marker
var infoWindow = new google.maps.InfoWindow({});
marker.addListener('click', function() {
map.setCenter(marker.getPosition());
// set the content of the infowindow
infoWindow.setContent(marker.description);
// open the infowindow on the marker.
infoWindow.open(map,marker);
});
markers.push(marker);
}
proof of concept fiddle
You are creating a new InfoWindow with every marker click:
marker.addListener('click' ...
var infoWindow = *new google.maps.InfoWindow( ...*
It is expected that you get multiple instances.
If you want one InfoWindow for all markers you can follow this example
If you want to have one per each marker check out this SO answer.
I have this part of code, that should show pins on google map of certain locations.
<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Sarajevo', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/DOd1sH3.png"
});
});
}
});
<div id="map_canvas"></div>
Map shows up and everything works, but the pins of locations are not shown.
I really dont know why.
Seems like you are calling the constructor without a reference to a variable.
Try this:
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/D0d1sH3.png"
});
Alternatively you can set the markers to the map by calling the setMap function
var marker = new google.maps.Marker({
position: latlng,
icon: "http://i.imgur.com/D0d1sH3.png"
});
marker.setMap(map);
Hope this helps
Hi all I have a site where I use google maps.
The problem is: I add some marker into the map adn i want that every marker if clicked, alert me its data.
With my code alert only the last (test9) because the variable is the same. How to add a listener of a dynamic variable?
This is my code:
for (i = 0; i<10; i++){
myLatlng = new google.maps.LatLng((44.900)+(i/10), 11.634521);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"+i,
data:"test"+i
});
google.maps.event.addListener(marker, 'click', function() {
alert(marker.data);
});
}
Ok try adding a new function such as addMarkerFunction(marker)
such as
function addMarkerFunction(marker){
google.maps.event.addListener(marker, 'click', function() {
alert(marker.data);
});
}
Then edit your for loop code to be :
for (i = 0; i<10; i++){
myLatlng = new google.maps.LatLng((44.900)+(i/10), 11.634521);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"+i,
data:"test"+i
});
addMarkerFunction(marker);
}
removing the call to google.maps.event.addListener
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Google Maps - Multiple markers - 1 InfoWindow problem
I'm making a map where I plot some towns and places.
As you will see, when you click on a marker, you are redirected to the corresponding page. But now I would like to put the link and some other information in an info bubble popover. So, I've edit my code to this:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5],});
marker[i] = marker;
google.maps.event.addListener(marker[i], 'click', function() {
infobulle.open(map, marker);
});
}
}
But as you can see here the info bubble stays "blocked" on the last location. I really don't know how to sort this.
I have the same result with this :
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4]});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
Last version :
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
processBeach(locations[i]);
}
}
function processBeach(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4]});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
You are using the marker variable for two different purposes it seems. One is as a single marker, and one as an array of markers. But you don't need an array of markers, if you use closures. Try this:
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
(function(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}(locations[i]));
}
}
By the way you also had a spurious comma at the end of the options array for google.maps.Marker which will cause problems in some browsers.
EDIT
If you don't want to use closures, this is equivalent:
function processBeach(beach) {
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
google.maps.event.addListener(marker, 'click', function() {
infobulle.open(map, marker);
});
}
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
processBeach(locations[i]);
}
}
Have a look at my jSFiddle here. The code you are missing is
On Click you need to fetch the current infoWindow from the map and then update it with new information
If you want to keep windows open and close when people want to close then you have to set a toggle kind of variable so each window will be created on click and then when someone click on close it will go away. But i think you only need to complete first part.
The code you should look in my fiddle is from line 120 to 150 which does check for infowindow if it exists and then do open the same window on new marker so it moves from old marker and go to new. if you keep creating new windows the old ones will not close magically.
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}}); // Get current info window
if (infowindow){ // if infoWindow is there then use it else create new
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht);
jQuery("#customPopup").show(500);
}