I'm adding a number of markers to a Google Map from xml through a for loop. When I click the marker for the infowindow to pop up I get an error stating 'cannot call method "open" of undefined'. What am I doing wrong here?
jQuery
var markers = xml.documentElement.getElementsByTagName('marker');
//function to create unique id
var getMarkerUniqueId = function(lat, lng) {
return lat + '_' + lng;
}
//function to get lat/lng
var getLatLng = function(lat,lng) {
return new google.maps.LatLng(lat, lng);
}
//cycle through and create map markers for each xml marker
for (var i = 0; i < markers.length; i++) {
//create vars to hold lat/lng from database
var lat = parseFloat(markers[i].getAttribute('lat'));
var lng = parseFloat(markers[i].getAttribute('lng'));
//create a unique id for the marker
var markerId = getMarkerUniqueId(lat, lng);
var name = markers[i].getAttribute('Type');
var html = '<b>' + name + '</b>';
//create the marker on the map
var marker = new google.maps.Marker({
map: the_Map,
position: getLatLng(lat, lng),
id: 'marker_' + markerId
});
//put the markerId into the cache
markers_arr[markerId] = marker;
infoWindow[i] = new google.maps.InfoWindow({
content: html,
position: getLatLng(lat, lng),
});
infobox[i] = google.maps.event.addListener(marker,'click',function() {
infoWindow[i].open(the_Map,marker);
});
}
You need a closure:
infobox[i] = google.maps.event.addListener(marker,'click',function() {
return function (windowToOpen) {
windowToOpen.open(the_Map,marker);
}(infoWindow[i]);
});
At the time you executing infoWindow[i].open value of i is equals markers.length. you should create a context for each infowindow
modifie Code:
function createContext (marker, iw){
google.maps.event.addListener(marker,'click',function() {
iw.open(the_Map,marker);
/ });
}
for (var i = 0; i < markers.length; i++) {
....
infobox[i] = createContext(marker, infoWindow[i]);
}
Related
I work in Laravel project and I have module for displaying and removing all stores on a Google map if I choose only 1 store.
This is a duplicate question, however, why my function is not working setting the function showallmarks as null.
Question: How to remove all the marks displayed in the google maps once a button is clicked?
I have here the codes.
Show all marks:
showallmarks();
function showallmarks() {
$.each(locations, function(index, value) {
var position = new google.maps.LatLng(value.store_lat, value.store_long);
var title = value.branch_name;
var address = value.store_address;
var contentString = "<h5>" + title + "</h5>" + address;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: position,
icon: google.maps.marker,
map: map,
zoom: 12
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
}
Once I click this button the showallmarks must not be shown on the Google map.
var markeronce;
$('button#addresses').click(function() {
//removing all marks
showallmarks(null);
var infowindow = new google.maps.InfoWindow({
content: "<span>Visit us on our store.</span>"
});
var address_href = $(this).val();
var commaPos = address_href.indexOf(',');
var coordinatesLat = parseFloat(address_href.substring(0, commaPos));
var coordinatesLong = parseFloat(address_href.substring(commaPos + 1, address_href.length));
var centerPoint = new google.maps.LatLng(coordinatesLat, coordinatesLong);
if (!markeronce) {
markeronce = new google.maps.Marker({
position: centerPoint,
map: map,
zoom: 8
});
} else {
markeronce.setPosition(centerPoint);
}
map.setCenter(centerPoint);
})
Add Button like
<input type="button" value="Delete" onclick="DeleteMarkers()" />
And try this function
<script type="text/javascript">
var markers = [];
function DeleteMarkers() {
//Loop through all the markers and remove
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
};
</script>
I am developing an application which consist in bulky wastes' signalements where each citizen could inform authorities about the place to collect them.
Datas (addresses and coordinates) are stocked into firebase and I'm working on the display of markers in a google map.
Here is the code:
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
markers: findMarkers();
console.log(markers);
console.log(markers.length);
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<p>' + 'adresse' +'</p>' + '</div>'],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1].lat(), markers[i][1].lng());
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
function findMarkers(){
markers = [];
var data = firebase.database();
var dataRef = firebase.database().ref("signalement/");
dataRef.on("child_added", function(data) {
var key = data.key;
const signalement = data.val();
const adresse = signalement.adresse;
const coordonnees = signalement.coordonnees;
var marker = [adresse, coordonnees];
markers.push( marker );
});
// Multiple Markers
return markers;
}
</script>
</head>
<body>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
</html>
Problem comes from the console.log(markers.length); which is equal to 0 ! While the previous console.log(markers); shows the object.
Maybe a syntax error of var marker?
Anyway.
Someone to help me for this case?
Thanks
Looks like the problem is with the firebase data callback. Since you have set the callback for google map api callback=initialize the marker data is not ready from the firebase by the time it executes the function.
I would rather do something like this (keeping in mind that firebase callback takes longer than the google map script being loaded & map has dependency on the data from firebase).
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?&callback=findMarkers";
document.body.appendChild(script);
});
function initialize(markers) {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
console.log(markers);
console.log(markers.length);
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<p>' + 'adresse' +'</p>' + '</div>'],
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1].lat(), markers[i][1].lng());
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
function findMarkers(){
markers = [];
var data = firebase.database();
var dataRef = firebase.database().ref("signalement/");
dataRef.on("child_added", function(data) {
var key = data.key;
const signalement = data.val();
const adresse = signalement.adresse;
const coordonnees = signalement.coordonnees;
var marker = [adresse, coordonnees];
markers.push( marker );
});
// send prepared marker array to map initialize function
intialize(markers);
}
I have a list of events that I display as markers on a map(its web application/site) and I would like to show only events in a certain distance (10 KM) from the user current location So, how can I combine this 2
//User Location
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(
function (position) {
var currentLatitude = position.coords.latitude;
var currentLongitude = position.coords.longitude;
// alert ("Latitude"+currentLatitude+"Longitude"+currentLongitude);window.mapServiceProvider(position.coords.latitude,position.coords.longitude);
// console.log(position);
}
);
}
//List of location from the Db.
var markers = #Html.Raw(Json.Encode(Model.UpcomingLectureGigs));
//Set All merkers on the map
window.onload = function (a) {
var mapOptions = {
center: new window.google.maps.LatLng(window.markers[0].Latitude, window.markers[0].Longitude),
zoom: 12,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
var infoWindow = new window.google.maps.InfoWindow();
var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (var i = 0; i < window.markers.length; i++) {
var data = window.markers[i];
var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude);
// console.log(data.Latitude, data.Longitude);
var marker = new window.google.maps.Marker({
position: myLatlng,
draggable: true,
animation: google.maps.Animation.DROP,
get map() { return map; }
});
(function (marker, data) {
window.google.maps.event.addListener(marker,
"click",
function (e) {
infoWindow.setContent(data
.Venue +
" " +
data.Genre.Name +
" " +
data.DateTime.toString("dd/mm/yy"));
//.toISOString().split("T")[0]);
// .format('MM/DD h:mm');
infoWindow.open(map, marker);
});
})(marker, data);
};
};
You can use a geometry library to calculate distance in meters between the user location and marker.
https://developers.google.com/maps/documentation/javascript/reference#spherical
The code snapshot to filter markers may be something like
var markers_filtered = markers.filter(function(marker, index, array) {
var myLatlng = new window.google.maps.LatLng(marker.Latitude, marker.Longitude);
return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000;
});
for (var i = 0; i < markers_filtered.length; i++) {
//Your stuff here
}
You should add libraries=geometry parameter when you load Maps JavaScript API.
https://developers.google.com/maps/documentation/javascript/geometry
Currently I am creating a Google Map View for my listing website with multiple markers added which all latitudes and longitudes are retrieved from database. Now I met a problem, which is having same latitude and longitude markers. I searched through the net and found a solution which is to use Marker Cluster but i have no idea with that, please help.
This is my code for getting the current location, marked with different icon and also adding multiple markers which the lat and lon are retrieved from the database:
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon);
mapholder = document.getElementById('mapholder');
mapholder.style.height = '500px';
mapholder.style.width = '1300px';
var myOptions = {
center:latlon,zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
var infowindowforCurrentLoc = new google.maps.InfoWindow();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: latlon,
icon: image,
map: map,
});
marker.addListener('click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
infowindowforCurrentLoc.setContent('<h2>You are Here!</h2>');
infowindowforCurrentLoc.open(map, marker);
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
var markerr = new google.maps.Marker();
<?php
$filtering = $_GET["filtering"];
if($filtering=="condo"||$filtering=="commercial"){
$sql = "SELECT * FROM propertylisting WHERE propertytype='$filtering'";
}
else{
$sql = "SELECT * FROM propertylisting WHERE listingtype='$filtering'";
}
$result=mysql_query($sql);
$totallist = mysql_num_rows($result);
$tmpcount=0;
echo"var infowindow = new google.maps.InfoWindow(), markerr, i;
var markers=new Array(3);";
while($rows=mysql_fetch_array($result)){
echo"markers[".$tmpcount."]=new Array(3);
markers[".$tmpcount."][0]='".$rows['listingtopic']."';
markers[".$tmpcount."][1]= ".$rows['listinglatitude'].";
markers[".$tmpcount."][2]= ".$rows['listinglongitude'].";
";
$tmpcount=$tmpcount+1;
}
?>
for (i = 0; i < markers.length; i++) {
markerr = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
google.maps.event.addListener(markerr, 'click', (function(markerr, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, markerr);
}
})(markerr, i));
}
I think that you can use the marker cluster (https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js) for that. Modify your script, which creates the markers like this:
var markers = [];
for (i = 0; i < markers.length; i++) {
var markerr = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
markers.push(markerr);
}
var markerCluster = new MarkerClusterer(map, markers);
My markers are generated from xml parser. Its working and showing eg 7 markers, but when I added MC then it shows only 1 marker.
Check my js.
Maybe it problem is here? markers.push(marker); ?
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(52.6145, 21.3418);
var mapOptions = {
zoom: 6,
center: chicago
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("db/parse_xml.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("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var cover = markers[i].getAttribute("cover");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div id='infobox'><img src='" + cover + "'/><b>" + name + "</b><br>" + address + " <br/><input type='button' id='end' onClick=calcRoute() name='" + name + "," + address + "' value='Wyznacz trasę'></div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
document.getElementById('pasekBoczny').innerHTML += '<li class="list-sidebar" ><a href="javascript:myclick(' + i + ')" >' + name + '</a></li>';
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
});
}
markers is a DOMNodeList, which doesn't have a method push
Create an array and populate the array with the google.maps.Marker's
var markers = xml.documentElement.getElementsByTagName("marker"),
markerArray=[];
for (var i = 0; i < markers.length; i++) {
/**
* your code
**/
//markers.push(marker);<--error, remove it, currently the script will stop here
markerArray.push(marker);//add this instead
}
var markerCluster = new MarkerClusterer(map, markerArray);