Adding eventlistener to javascript array

Adding eventlistener to javascript array - javascript

I'm trying to put my markers on google maps and add an InfoWindow to each single marker. I'm getting Cannot read property 'name' of undefined on this line after I click on one of the markers:
markers[i].name.open(map, marker);
Here's the complete script:
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
// zoom in on current location if available (not done yet...)
center: new google.maps.LatLng(5,5)
});
var markers = [
// put all markers in a markers array
#foreach ($markers as $marker)
new google.maps.Marker({
position: { lat: {{$marker->x}}, lng: {{$marker->y}} },
// infowindow for each marker with its name
name: new google.maps.InfoWindow({
content: "{{$marker->name}}"
})
}),
#endforeach
];
for (var i = 0; i < markers.length; i++) {
// add eventlistener for the infowindow we added earlier
google.maps.event.addListener(markers[i], 'click', function() {
markers[i].name.open(map, marker);
});
// add marker to map
markers[i].setMap(map);
}
}
I'm using Laravel 5.1 with the Blade templating engine.

This works (this in the click listener refers to the google.maps.Marker that was clicked):
for (var i = 0; i < markers.length; i++) {
// add eventlistener for the infowindow we added earlier
google.maps.event.addListener(markers[i], 'click', function() {
this.name.open(map, this);
});
// add marker to map
markers[i].setMap(map);
}
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
// zoom in on current location if available (not done yet...)
center: new google.maps.LatLng(5, 5)
});
var markers = [
// put all markers in a markers array
// #foreach ($markers as $marker)
// New York, NY, USA (40.7127837, -74.00594130000002)
new google.maps.Marker({
position: {
lat: 40.7127837,
lng: -74.0059413
},
// infowindow for each marker with its name
name: new google.maps.InfoWindow({
content: "New York, NY, USA"
})
}),
// Newark, NJ, USA (40.735657, -74.1723667)
new google.maps.Marker({
position: {
lat: 40.735657,
lng: -74.1723667
},
// infowindow for each marker with its name
name: new google.maps.InfoWindow({
content: "Newark, NJ, USA"
})
}),
// Baltimore, MD, USA (39.2903848, -76.61218930000001)
new google.maps.Marker({
position: {
lat: 39.2903848,
lng: -76.6121893
},
// infowindow for each marker with its name
name: new google.maps.InfoWindow({
content: "Baltimore, MD, USA"
})
}),
// #endforeach
];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
// add eventlistener for the infowindow we added earlier
google.maps.event.addListener(markers[i], 'click', function() {
this.name.open(map, this);
});
// add marker to map
markers[i].setMap(map);
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

try this ?
for (var i = 0; i < markers.length; i++) {
// add eventlistener for the infowindow we added earlier
(function(i) {
google.maps.event.addListener(markers[i], 'click', function() {
//console.log(markers[i])
markers[i].name.open(map, markers[i]);
});
// add marker to map
markers[i].setMap(map);
})(i);
}

Related

Google Maps Hiding Marker Labels

Is there a way to hide marker labels after I created them?
I researched and found MarkerWithLabel, but I don't want to use 3rd libraries.
Creating labels inside the markers like that
new google.maps.Marker({ label:{text:'test',color:'black'} });
I want to hide and show them with a checkbox.

Related question: Google map marker label text color change
To hide the label, call marker.setLabel("");
To restore it, save the original value in another property of the marker (say _label), and use that to set the value when the checkbox value changes:
google.maps.event.addDomListener(document.getElementById('chkbx'), 'click', function() {
var checked = document.getElementById('chkbx').checked;
if (!checked) {
// remove the labels
for (var i=0; i<markers.length; i++)
markers[i].setLabel("");
} else {
for (var i=0; i<markers.length; i++)
markers[i].setLabel(markers[i]._label);
}
});
proof of concept fiddle
code snippet:
var geocoder;
var map;
var markers = [];
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Mountain View, CA, USA (37.3860517, -122.0838511)
var marker1 = createMarker({
lat: 37.3860517,
lng: -122.0838511
}, "Mountain View, CA", "A");
// Palo Alto, CA, USA (37.4418834, -122.14301949999998)
var marker2 = createMarker({
lat: 37.4418834,
lng: -122.14301949999998
}, "Palo Alto", "B");
// Stanford, CA, USA (37.42410599999999, -122.1660756)
var marker3 = createMarker({
lat: 37.42410599999999,
lng: -122.1660756
}, "Stanford, CA", "C");
var bounds = new google.maps.LatLngBounds();
bounds.extend(marker1.getPosition());
bounds.extend(marker2.getPosition());
bounds.extend(marker3.getPosition());
map.fitBounds(bounds);
google.maps.event.addDomListener(document.getElementById('chkbx'), 'click', function() {
var checked = document.getElementById('chkbx').checked;
if (!checked) {
// remove the labels
for (var i = 0; i < markers.length; i++)
markers[i].setLabel("");
} else {
for (var i = 0; i < markers.length; i++)
markers[i].setLabel(markers[i]._label);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
function createMarker(latLng, text, label) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: {
text: label,
color: "white"
},
_label: {
text: label,
color: "white"
}
});
markers.push(marker);
return marker;
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
height: 90%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="checkbox" id="chkbx" name="chkbx" checked="checked" />toggle marker labels
<div id="map_canvas"></div>

How to open web links from some Google Maps markers?

I can open web link from marker by
google.maps.event.addListener(marker, "click", function() {
window.open('http://example.com/');
});
But what if I need to place 100 markers with 100 links to Google Maps?
My array with coordinates and links looks like this
var point = [[52.7081444444445, 58.6677361111111, "Sib/2377/index.html"],
[52.7039611111111, 58.668425, "Sib/2378/index.html"],
[52.6993166666667, 58.6680305555556, "Sib/2379/index.html"],
[52.6946277777778, 58.6679416666667, "Sib/2380/index.html"],
[52.6947833333333, 58.6755555555556, "Sib/2381/index.html"]];

add the URL as a property of the marker (.url). Open the window using this.url
for (var i = 0; i < points.length; i++) {
var point = points[i];
var marker = new google.maps.Marker({
position: {
lat: point[0],
lng: point[1]
},
map: map,
url: point[2]
});
google.maps.event.addListener(marker, "click", function() {
window.open(this.url);
});
}
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: -33.9,
lng: 151.2
}
});
setMarkers(map);
}
// Data for the markers consisting of a Latitude, a Longitude and a URL.
var points = [
[52.7081444444445, 58.6677361111111, "http://www.google.com"],
[52.7039611111111, 58.668425, "http://www.yahoo.com"],
[52.6993166666667, 58.6680305555556, "http://maps.google.com"],
[52.6946277777778, 58.6679416666667, "http://maps.google.com?q=52.6946277777778,58.6679416666667"],
[52.6947833333333, 58.6755555555556, "http://maps.google.com?q=52.6947833333333,58.6755555555556"]
];
function setMarkers(map) {
var bounds = new google.maps.LatLngBounds();
// Adds markers to the map.
for (var i = 0; i < points.length; i++) {
var point = points[i];
var marker = new google.maps.Marker({
position: {
lat: point[0],
lng: point[1]
},
map: map,
url: point[2]
});
google.maps.event.addListener(marker, "click", function() {
window.open(this.url);
});
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

When I click a marker on Google map it should open multiple markers, but the marker that has been clicked should also appear

I have written code for Google Maps API where when I click a marker multiple markers should appear, but the marker that has been clicked should also appear. Means the page should not refresh. Please help me. Here is my code where if you click on the marker multiple markers will appear, but the marker disappears.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 25.2138, lng: 75.8648};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!',
map: map
});
marker.addListener('click', function() {
clicktoOpenMAp();
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
}
function clicktoOpenMAp() { var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setTilt(50);
var markers = [
['chittorgarh', 24.8887, 74.6269],
['morak', 24.7265, 75.9739],
['mangrol', 25.3362, 76.5112]
];
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key='YourGoogleApiBecauseicantsharemine'&callback=initMap"></script>
</body>
</html>
Please use your Google API key, because I can't share mine.

Ok, this is how I fixed it:
function initMap() {
var uluru = {
lat: 25.2138,
lng: 75.8648
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!',
map: map
});
marker.addListener('click', function() {
clicktoOpenMAp();
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
infowindow.close();
});
function clicktoOpenMAp() {
// var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.mapTypeId = "roadmap";
map.setTilt(50);
var markers = [
['chittorgarh', 24.8887, 74.6269],
['morak', 24.7265, 75.9739],
['mangrol', 25.3362, 76.5112]
];
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
}
You were "creating" another map everytime you clicked in the marker (I commented the line so you know), then you need to put the Function clicktoOpenMap inside initmap.
Note: I also added async defer to the script where you call the api
<script
src="https://maps.googleapis.com/maps/api/js?key='YourGoogleApiBecauseicantsharemine'&callback=initMap" async defer></script>
You can hide the markers with
markers[i].setMap(null);
and to erase them
var markers = [];

google maps info windows opening at extreme left instead of provided position

I am using google maps API to make some custom markers and i want to open a custom info window. I have been trying to set the position of the info window but its always opening on the extreme top left.
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = markers[i][2];
marker[i] = infowindow = new google.maps.InfoWindow({
content: html,
pixelOffset: new google.maps.Size(200, 0)
});
marker[i] = new google.maps.Marker({
position: position,
icon: icon,
map: map,
}).addListener('mouseover', function() {
infowindow.open(map, marker[i]);
});
}

I think your problem lies how to create marker and info window in your code.To create multiple markers in map, see code below .
Fiddle demo
function initMap() {
var myLatLng = {
lat: 40.4173,
lng: -82.9071
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
for (i = 0; i < markers.length; i++) {
(function(markers) {
var position = new google.maps.LatLng(markers[0], markers[1]);
var icon = markers[2];
var infowindow = new google.maps.InfoWindow({
content: 'html',
pixelOffset: new google.maps.Size(200, 0)
});
var markerss = new google.maps.Marker({
position: position,
map: map,
//icon: icon,
});
google.maps.event.addListener(markerss, 'click', function() {
infowindow.open(map, markerss);
});
})(markers[i]);
}
}

marker[i] is not defined in this line:
infowindow.open(map, marker[i]);
Without a defined anchor, the infowindow ends up in the upper left hand corner of the map.
You can use this for the anchor in the mouseover event handler function:
infowindow.open(map, this);
You probably also want to remove the:
pixelOffset: new google.maps.Size(200, 0)
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var html = "marker";
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = markers[i][2];
var infowindow = new google.maps.InfoWindow({
content: html,
// pixelOffset: new google.maps.Size(200, 0)
});
var marker = new google.maps.Marker({
position: position,
// icon: icon,
map: map,
}).addListener('mouseover', function() {
infowindow.open(map, this);
});
bounds.extend(position);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Calculate the center point of multiple Lat/Long

I am using Google Map to display multiple lat/long points.
But the Google map Javascript code has the code snippet to track the center of lat/long of the available lat/long.
<script type="text/javascript">
var locations = JSON.parse('<?php echo json_encode($data);?>'); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
In Above code the line
center: new google.maps.LatLng(),
needs a lat/long pair which could be the center point of multiple lat/long to be displayed.
How could that be done?

This works. See the documentation of Map.fitBounds and LatLngBounds for details:
<script type="text/javascript">
var locations = JSON.parse('<?php echo json_encode($data);?>');//alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2],locations[i][3]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
</script>
code snippet:
var locations = JSON.parse(
JSON.stringify([
['AAA', 'BBB', 42, -72],
['BBB', 'CCC', 42.1, -72.2]
])); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

You should get the bounds of your added markers with the function map.getBounds().
It returns an object on which you can get the center bound.getCenter().
See Find center of multiple locations in Google Maps

Develop Reference

JavaScript is the programming language of the Web.

Adding eventlistener to javascript array - javascript

Related

Google Maps Hiding Marker Labels

How to open web links from some Google Maps markers?

When I click a marker on Google map it should open multiple markers, but the marker that has been clicked should also appear

google maps info windows opening at extreme left instead of provided position

Calculate the center point of multiple Lat/Long

Categories

Resources