Google Maps API V3 removing a marker from array - google-maps-api-3

I am using the code below to add markers to a map it also have a listener to remove the marker from the map but I cannot figure out how to also remove the
marker from the markerarray at the same time as time as removing it from the map.
can someone give me a pointer on how to achieve this.
function createRedMarker(Lat, Lang, html, atitle) {
var latlng = new google.maps.LatLng(Lat, Lang);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: atitle,
icon: redmarker,
shadow: mshadow
});
google.maps.event.addListener(marker, "rightclick", function() {
if (confirm("Deselect " + marker.title + " and remove from Map?")) {
marker.setMap(null);
window.status = "Deselected>" + marker.title + "<";
}
});
markersArray.push(marker);
}

Please take a look at this solution. Hope this will help.
function createRedMarker(Lat, Lang, html, atitle) {
var latlng = new google.maps.LatLng(Lat, Lang);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: atitle,
icon: redmarker,
shadow: mshadow
});
google.maps.event.addListener(marker, "rightclick", function() {
if (confirm("Deselect " + marker.title + " and remove from Map?")) {
marker.setMap(null);
for (var i = 0; i < markers.length; i++) {
if (markers[i].getPosition().equals(marker.getPosition())) {
var index = markers.indexOf(marker);
markers.splice(index, 1);
break;
}
}
window.status = "Deselected>" + marker.title + "<";
}
});
markersArray.push(marker);
}

Related

Code works in EDIT view and not SAVED page

My mission: Create a map from list such as :
When editing a SharePoint page (edit mode/view) the map throws no errors in the console. But as I go to view the final saved page the map I get this error in the console:
Event Page.aspx:668 Uncaught TypeError: Cannot read property 'get_current' of undefined
at retrieveListItems (Event Page.aspx:668)
at Event Page.aspx:789
This error points to this line :
var clientContext = new SP.ClientContext.get_current();
It seems like the PAGE is missing some resources that get added when I'm in EDIT MODE.
This code gets the info from the list to pass to the map script.
function retrieveListItems() {
var listName = "North East Events";
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle(listName);
this.website = clientContext.get_web();
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
'<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>50</RowLimit></View>');
collListItem = oList.getItems(camlQuery);
clientContext.load(this.website);
clientContext.load(this.collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
var listItemInfo = '';
var locations = [];
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var eventName = oListItem.get_item('Title');
var eventAddress = oListItem.get_item('WorkAddress');
var eventURL = website.get_url() + '/' + 'Lists/North East Reports/DispForm.aspx?ID=' + oListItem.get_id();
var newLocations = [eventName, eventAddress, eventURL];
locations.push(newLocations);
}
google.maps.event.addDomListener(window, "load", initialize);
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
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations, i);
}
}
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function infoWindow(marker, map, title, address, url) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
infoWindow(marker, map, title, address, url);
return marker;
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
retrieveListItems();

Google Map Direction service Route

I want to draw the shortest path map route miles between the two points.Using the Javascript - directionsService.route
As click on first time map it creates start point as click second time on map it creates second point on it and draws route
var map;
var infowindow = new google.maps.InfoWindow();
var wayA;[![enter image description here][1]][1]
var wayB;
var geocoder = new google.maps.Geocoder();
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
panel: document.getElementById('right-panel'),
draggable: true
});
var directionsService = new google.maps.DirectionsService();
var data = {};
initMap();
function initMap() {
debugger;
map = new google.maps.Map(document.getElementById('rmap'), {
center: new google.maps.LatLng(23.030357, 72.517845),
zoom: 15
});
google.maps.event.addListener(map, "click", function (event) {
if (!wayA) {
wayA = new google.maps.Marker({
position: event.latLng,
map: map,
icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000"
});
} else {
if (!wayB) {
debugger;
wayB = new google.maps.Marker({
position: event.latLng,
map: map,
icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000"
});
calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB);
}
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
return total;
}
function computeTotalDuration(result) {
var total = 0;
var myroute = result.routes[0].legs[0].duration.text;
return myroute;
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB) {
debugger;
directionsDisplay.setMap(map);
google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
debugger;
calculateAndDisplayRoute(directionsService, directionsDisplay.getDirections(), wayA, wayB);
});
directionsService.route({
origin: wayA.getPosition(),
destination: wayB.getPosition(),
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function (response, status) {
if (status === 'OK') {
debugger;
var route = response.routes[0];
wayA.setMap(null);
wayB.setMap(null);
pinA = new google.maps.Marker({
position: route.legs[0].start_location,
map: map,
icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000"
}),
pinB = new google.maps.Marker({
position: route.legs[0].end_location,
map: map,
icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000"
});
google.maps.event.addListener(pinA, 'click', function () {
infowindow.setContent("<b>Route Start Address = </b>" + route.legs[0].start_address + " <br/>" + route.legs[0].start_location);
infowindow.open(map, this);
});
google.maps.event.addListener(pinB, 'click', function () {
debugger;
infowindow.setContent("<b>Route End Address = </b>" + route.legs[0].end_address + " <br/><b>Distance=</b> " + computeTotalDistance(directionsDisplay.getDirections()) + " Km <br/><b>Travel time=</b> " + computeTotalDuration(directionsDisplay.getDirections()) + " <br/> " + route.legs[0].end_location);
infowindow.open(map, this);
});
} else {
window.alert('Directions request failed due to ' + status);
}
directionsDisplay.setDirections(response);
});
}

Issue on Accessing JSON Values in Google Maps Infowindow (infoBox)

Using jQuery Ajax call I am trying to show some Markers and their associated info from database on the Map as:
$(document).ready(function () {
var markers = [];
var infoBox = null;
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(49.241943, -122.889318),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: 'true'
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$("#g-one-1").on("click",function(){
var data = 'data=' + "open";
var reqOne = $.ajax({
type: "POST",
url: "assets/gone.php",
data: data,
cache: false,
dataType: "JSON",
beforeSend: function () {console.log(data);},
complete: function () {console.log("Data Is Sent");}
});
reqOne.fail(function() { console.log( "There is an Error" ); });
reqOne.done(function(data){
for (var i = 0; i < data.length; i++) {
var current = data[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = data[i].name;
google.maps.event.addListener(markers[i], "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
}
});
});
});
The code is working fine until showing the infobox value which I tried to get each of points lat, lng and name by using current.name current.lng and current.lat
in infoBox content as
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
but I am getting same .name , .lng, and .lat in all boxes? As far as I know I have a loop at
for (var i = 0; i < data.length; i++) {
var current = data[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
to assign the lat long values from json to markers but it seems it is not accessible here!
Can yopu please let me know how to fix this
Simple fix using function closure. Replace this code with a call to createMarker(current):
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = data[i].name;
google.maps.event.addListener(markers[i], "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
where createMarker is:
createMarker(current) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(current.lat, current.lng),
map: map,
content: current.content
});
markers.push(marker);
var projName = current.name;
google.maps.event.addListener(marker, "click", function (e) {
if (!infoBox) {
infoBox = new InfoBox({
latlng: this.getPosition(),
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
} else {
infoBox.setOptions({
map: map,
content: '<table class="table"><tr><td>Project Name</td><td>'+current.name+'</td></tr><tr><td>Longitiude</td><td>'+current.name+'</td></tr><tr><td>Latitiude</td><td>'+current.lat+'</td></tr></table>'
});
infoBox.setPosition(this.getPosition());
}
});
}

new info window does not work when i click on google map marker

Hello i am having problem to show new infowindow when i click on marker.I want to show infowindow after click on marker. Please someone one give me a solution. My code is given bellow.
var markerClusterer = null;
var map = null;
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var style = parseInt(document.getElementById('style').value, 10);
if (style == 0) {
var data =w_plaza;
var imageUrl = 'images/walton.png';
}
if (style == 1) {
var data =w_dealer;
var imageUrl = 'images/people35.png';
}
if (style == 2) {
var data =w_service_center;
var imageUrl = 'images/service_center.png';
}
var markerImage = new google.maps.MarkerImage(imageUrl);
// var markerImage = new google.maps.MarkerImage(imageUrl,
//new google.maps.Size(24, 32));
for (var i = 0; i < data.length; i++) {
var loc = data[i];
var latLng = new google.maps.LatLng(loc[1],loc[2]);
var content = loc[0] + ":" + loc[1] + "," + loc[2];
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("hello");
infowindow.open(map, marker);
});
markers.push(marker);
}
The first time we see infowindow in your code is at:
infowindow.setContent("hello");
What is infowindow, where was it created? Nowhere as far as I can see. Somewhere in your function, before we get as far as creating the marker, create it something like this:
var infowindow = new google.maps.InfoWindow();

close InfoWindow before open another

I have a problem with InfoWindow. I have an ajax function that retrieves data via JSON, but I can not get close InfoWindow automatically when you open another.
My code is this:
var mapOptions = {
center: new google.maps.LatLng(44.49423583832911, 11.346244544982937),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mappa_locali"),mapOptions);
$.ajax({
type:'GET',
url:"locali_json.php"+urlz,
success:function(data){
var json = JSON.parse(data);
for (var i=0; i<json.length; i++) {
point = new google.maps.LatLng(json[i].latitudine,json[i].longitudine);
var infowindow = new google.maps.InfoWindow;
infowindow.setContent(''+json[i].nome_locale+'<br>'+json[i].address);
addMarkerz(point,infowindow);
}
}
})
}
function addMarkerz(point,infowindow) {
position: point,
map: map
});
google.maps.event.addListener(marker,'mouseover',infoCallback(infowindow, marker));
markers.push(marker);
infos.push(infowindow);
}
function infoCallback(infowindow, marker) {
return function() {
infowindow.close();
infowindow.open(map, marker);
};
}
Does anyone know where decreased mistake? Or do you have any advice for me?
The suggestion is only create one infowindow (in the global scope), reuse it and change its contents when a marker is clicked, close it if the user clicks on the map.
code snippet (removes the dependency on the AJAX call):
// global variables
var map;
var markers = [];
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.49423583832911, 11.346244544982937),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mappa_locali"), mapOptions);
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
point = new google.maps.LatLng(json[i].latitudine, json[i].longitudine);
var infowindowHtml = '' + json[i].nome_locale + '<br>' + json[i].address;
addMarkerz(point, infowindowHtml);
}
}
function addMarkerz(point, infowindowHtml) {
var marker = new google.maps.Marker({
position: point,
map: map
});
google.maps.event.addListener(marker, 'mouseover', infoCallback(infowindowHtml, marker));
markers.push(marker);
}
function infoCallback(infowindowHtml, marker) {
return function() {
infowindow.close();
// update the content of the infowindow before opening it
infowindow.setContent(infowindowHtml)
infowindow.open(map, marker);
};
}
var data = JSON.stringify([{
latitudine: 44.494887,
longitudine: 11.3426163,
id_locale: "0",
nome_locale: "Bologna",
address: "Bologna, Italy"
}, {
latitudine: 44.4946615,
longitudine: 11.314634999999953,
id_locale: "0",
nome_locale: "Quartiere Saragozza",
address: "Quartiere Saragozza, Bologna, Italy"
}]);
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#mappa_locali {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mappa_locali"></div>
function infoCallback(infowindow, marker) {
return function() {
infowindow.close();
infowindow.open(map, marker);
};
}
should be changed to
function infoCallback(infowindow, marker) {
return function() {
//Close active window if exists
if (activeWindow != null) {
activeWindow.close();
}
//Open new window
infowindow.open(map,marker);
//Store new window in global variable
activeWindow = infowindow;
};
}
and declare activeWindow as a global variable in your .js file as var activeWindow.
I think I have a simple solution. I just save the last open mark. On the next click first of all I close the last mark.
var markers = [];
var infowindows = [];
function addMarkes(facilityID) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < variants.length; i++) {
var v = variants[i];
var position = new google.maps.LatLng(v.Lat, v.Long);
bounds.extend(position);
markers[i] = new google.maps.Marker({
position: position,
title: v.Title,
map: map,
animation: google.maps.Animation.DROP,
icon: v.Icon,
infoWindowIndex: i //synchronize with infoWindows
});
var localContent = '<div><span class="address">' + v.Address + '</span></div>';
infowindows[i] = new google.maps.InfoWindow({
content: localContent
});
//Just for multiple marks.
if (variants.length > 0) {
var lastOpen = -1; //Save the last open mark
google.maps.event.addListener(markers[i], 'click', function (innerKey) {
return function () {
//Close the last mark.
if (lastOpen > -1) {
infowindows[lastOpen].close();
}
infowindows[innerKey].open(map, markers[innerKey]);
lastOpen = innerKey;
}
}(i));
}
}
map.fitBounds(bounds);
}

Resources