The markers in my program just wont remove with the deleteMarkers() function
CSS:
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
HTML:
<div style="height:500px; width:750px;">
<div id="map-canvas"></div>
</div>
<select class="form-control" name="dateSelect" id="dateSelect" onchange="dateSelect_Event();"></select>
Javascript:
var map; <--- global variables
var locations = [];
var lat_get = '';
var long_get = '';
var marker=[];
var infowindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 7.072617, lng: 125.599494},
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13,
});
};
function deleteMarkers() {
for (var i = 0; i < marker.length; i++ ) {
marker[i].setMap(null);
}
marker.length = 0;
}
function dateSelect_Event() {
deleteMarkers();
infowindow = new google.maps.InfoWindow({});
var locationsRef = firebase.database().ref("location");
locationsRef.on('child_added', function(snapshot) {
var data = snapshot.val();
marker = new google.maps.Marker({
position: {
lat: parseFloat(data.latitude),
lng: parseFloat(data.longitude)
},
map: map
});
marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(this.getPosition().toUrlValue(6));
infowindow.open(map, this);
}
}(data)));
marker.setMap(map);
});
}
Firebase:
-databaseName
--location
---latitude
---longitude
I just use firebase to get the lat and long on every change of the html select option and it work perfectly. The problem this time is it can't delete the markers. Should I do the deleteMarkers differently?
Thanks to #StackSlave's answer. I was able to successfully remove it by creating and pushing the google_marker to the global marker variable.
function dateSelect_Event() {
deleteMarkers();
infowindow = new google.maps.InfoWindow({});
var locationsRef = firebase.database().ref("location");
locationsRef.on('child_added', function(snapshot) {
var data = snapshot.val();
var google_marker = new google.maps.Marker({
position: {
lat: parseFloat(data.latitude),
lng: parseFloat(data.longitude)
},
map: map
});
google_marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(this.getPosition().toUrlValue(6));
infowindow.open(map, this);
}
}(data)));
marker.push(google_marker);
});
marker.setMap(map);
}
Related
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>
I am creating a project using google map. My project contains hospital address ( in longitude and latitude) to be stored in database. But I want to show nearest hospital from my current location. And I am unable to figure out how to do it. Please help me with best algorithm and with some code.
Following code is used just to display all hospital address in map now I want is how to show only 3 nearest hospital from my current positiom.
function initMap() {
var mapType = google.maps.MapTypeId.ROADMAP;
var animationType = google.maps.Animation.DROP;
var currentLocationAnimationType = google.maps.Animation.BOUNCE;
var mapElement = document.getElementById('map');
var nepalLocation = {
lat: 28.3949,
lng: 84.1240
};
var mapOptions = {
center: nepalLocation,
zoom: 7,
mapTypeId: mapType,
};
// actual map
map = new google.maps.Map(mapElement, mapOptions);
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var geocoder = geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(p) {
var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "My Location",
animation: currentLocationAnimationType
});
google.maps.event.addListener(marker, "click", function(e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
});
} else {
alert('Geo Location feature is not supported in this browser.');
}
for (var i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var image = "img/iconHospital.png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title: data.district,
animation: animationType
});
}
}
google.maps.event.addDomListener(window, 'load', initMap);
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
See this example at. I adapted your code accordingly.
function initMap() {
var mapType = google.maps.MapTypeId.ROADMAP;
var animationType = google.maps.Animation.DROP;
var currentLocationAnimationType = google.maps.Animation.BOUNCE;
var mapElement = document.getElementById('map');
var nepalLocation = {
lat: 28.3949,
lng: 84.1240
};
var mapOptions = {
center: nepalLocation,
zoom: 7,
mapTypeId: mapType,
};
// actual map
map = new google.maps.Map(mapElement, mapOptions);
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var geocoder = geocoder = new google.maps.Geocoder();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(p) {
var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "My Location",
animation: currentLocationAnimationType
});
google.maps.event.addListener(marker, "click", function(e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
});
} else {
alert('Geo Location feature is not supported in this browser.');
}
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: nepalLocation,
radius: 50000,
type: ['hospital']
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
if (i == 2) {
break;
}
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
i trying to display markers according to user location and i keep getting this error that as commenas it is i didnt find any solution that match my problem,
thae error i'm getiing is : Uncaught TypeError: Cannot read property 'maps' of undefined & its referring to this :at Array.filter (native) .
thanks:
<script src="https://maps.googleapis.com/maps/api/js?key="My_Api_Key"&libraries=geometry"></script>
<script>
"use strict";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
var markers = #Html.Raw(Json.Encode(Model.UpcomingLectureGigs));
var currentLatitude = position.coords.latitude;
var currentLongitude = position.coords.longitude;
var userLatLng = currentLatitude + currentLongitude;
var markersFiltered = markers.filter(function(markers, index, array, google) {
var myLatlng = new window.google.maps.LatLng(markers.Latitude, markers.Longitude);
return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000;
});
window.onload = function(a) {
var mapOptions = {
center: new window.google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
zoom: 8,
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 < markersFiltered.length; i++) {
var data = markers[i];
var myLatlng = new window.google.maps.LatLng(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);
infoWindow.open(map, marker);
});
})(marker, data);
}
};
});
};
</script>
https://jsfiddle.net/1gm0u4wd/9/
Your html will be as below. Your maps api javascript will be linked inside html section not javascript section.
<div id="map" style="width: 500px; height: 500px"/>
<script src="https://maps.googleapis.com/maps/api/js?key=yourMapsAPIKey&libraries=geometry"></script>
Note : "yourMapsAPIKey" should be your API key.
You can get your maps api key from here.
Update your script as below
"use strict";
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
var currentLatitude = position.coords.latitude;
var currentLongitude = position.coords.longitude;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(currentLatitude, currentLongitude),
});
//your dynamic markers
var markers = #Html.Raw(Json.Encode(Model.UpcomingLectureGigs));
//default marker at current location
//var markers = new google.maps.Marker({
//position: new google.maps.LatLng(currentLatitude, currentLongitude),
//map: map,
//title: 'Hello World!'
//});
var userLatLng = new window.google.maps.LatLng(currentLatitude, currentLongitude);
//your filter function
var markersFiltered = markers.filter(function(markers, index, array, google) {
var myLatlng = new window.google.maps.LatLng(markers.Latitude, markers.Longitude);
return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000;
});
window.onload = function(a) {
var mapOptions = {
center: new window.google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
zoom: 8,
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 < markersFiltered.length; i++) {
var data = markers[i];
var myLatlng = new window.google.maps.LatLng(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);
infoWindow.open(map, marker);
});
})(marker, data);
}
};
});
};
Fiddle here
below code is my setup for this question, it works well
var map;
var markers = [];
var contentString = '<h1>This is the Title!</h1>';
function initialize() {
var losAngeles = new google.maps.LatLng(34.0500, -118.2500);
var mapOptions = {
zoom: 10,
center: losAngeles,
disableDefaultUI: true,
mapTypeControlOptions: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function addMarker(location) {
var markerOptions = {
position: location,
map: map
}
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
}
function setAllMap(map) {
for (var i = 0; i < markers.length;i++) {
markers[i].setMap(map);
}
}
function clearMarkers() {
setAllMap(null);
}
function showMarkers() {
setAllMap(map);
}
function deleteMarkers() {
clearMarkers();
markers = [];
}
function addInfoWindow() {
infowindow = new google.maps.InfoWindow({
content: contentString
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
$('#thurs').on('click', function() {
deleteMarkers();
// Loads the markers
addMarker(new google.maps.LatLng(34.0500, -118.2500));
markers[0].infowindow = new google.maps.InfoWindow({
content: contentString
});
console.log(markers[0].infowindow);
google.maps.event.addListener(markers[0], 'click', function() {
this.infowindow.open(map,this);
});
setAllMap(map);
});
})
Now my problem is to add multiple markers and a corresponding infowindow to each. My code for that (the jQuery) looks like this:
for(var i=0;i<locations.length;i++) {
if(locations[i].start.slice(0, 10) == "2015-04-10") {
addMarker(new google.maps.LatLng(parseFloat(locations[i].lat), parseFloat(locations[i].lng)));
}
}
console.log(markers);
for(var i=0;i<markers.length;i++) {
markers[i].infowindow = new google.maps.InfoWindow({
content: contentString
});
}
for(var i=0;markers.length;i++) {
console.log(markers[i].infowindow);
google.maps.event.addListener(markers[i], 'click', function() {
markers[i].infowindow.open(map,markers[i]);
});
}
When I do this, I get the following error:
Uncaught TypeError: Cannot read property 'infowindow' of undefined.
The issue is that you shouldn't be referencing "i" in your event listener. When you click on a marker i is markers.length. The following event listener will work:
google.maps.event.addListener(markers[i], 'click', function() {
this.infowindow.open(map, this);
});
Here is a code snippet to demonstrate:
<!DOCTYPE html xmlns:xlink="http://www.w3.org/1999/xlink">>
<head lang="en">
<meta charset="UTF-8">
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
var markers = [];
var contentString = '<h1>This is the Title!</h1>';
function initialize() {
var losAngeles = new google.maps.LatLng(34.0500, -118.2500);
var mapOptions = {
zoom: 10,
center: losAngeles,
disableDefaultUI: true,
mapTypeControlOptions: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
addMarkers();
}
function addMarker(location) {
var markerOptions = {
position: location,
map: map
}
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
}
var locations = [{
start: "2015-04-10",
lat: 34.0500,
lng: -118.2500
}];
function addMarkers() {
for (var i = 0; i < locations.length; i++) {
if (locations[i].start.slice(0, 10) == "2015-04-10") {
addMarker(new google.maps.LatLng(parseFloat(locations[i].lat), parseFloat(locations[i].lng)));
}
}
for (var i = 0; i < markers.length; i++) {
markers[i].infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(markers[i], 'click', function() {
this.infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
In the following code, it seems that the function initialize(), once triggered by socket.on('results') is unable to read the value of "array".
block content
script.
function initialize() {
var mapOptions = {
center: { lat: -30, lng: 150},
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, array);
}
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[0]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
div(id="map-canvas")
script.
var socket = io.connect('http://localhost:4000');
socket.on('results', function(results) {
var array = [];
results.forEach(function(item){
name = item.name;
coordinates = item.location.coordinate;
array.push([name, coordinates.latitude, coordinates.longitude]);
});
initialize();
});
Simple pass the array as a parameter when you call the initialize function.
initialize(array);
Them, in the function initialize:
function initialize(array) {REST OF THE CODE}
All code:
block content
script.
function initialize(array) {
var mapOptions = {
center: { lat: -30, lng: 150},
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
array = array || [];
setMarkers(map, array);
}
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[0]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
div(id="map-canvas")
script.
var socket = io.connect('http://localhost:4000');
socket.on('results', function(results) {
var array = [];
results.forEach(function(item){
name = item.name;
coordinates = item.location.coordinate;
array.push([name, coordinates.latitude, coordinates.longitude]);
});
initialize(array);
});
array variable is not visible inside initialize function. It is closured in callback anonymous function. I propose to pass array as argument:
block content
script.
function initialize(array) {
var mapOptions = {
center: { lat: -30, lng: 150},
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
array = array || [];
setMarkers(map, array);
}
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[0]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
div(id="map-canvas")
script.
var socket = io.connect('http://localhost:4000');
socket.on('results', function(results) {
var array = [];
results.forEach(function(item){
name = item.name;
coordinates = item.location.coordinate;
array.push([name, coordinates.latitude, coordinates.longitude]);
});
initialize(array);
});