in an app building environment I'm trying to use this code:
var map = new Appery('googlemap').gmap;
var markerLatLng = new google.maps.LatLng(localStorage.getItem("markerLat"), localStorage.getItem("markerLng"));
var Titolo = 'Some Title';
var markers = [];
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
title: Titolo,
animation: google.maps.Animation.DROP
});
markers.push(marker);
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
google.maps.event.addListener(marker, 'click', function() {markers.pop();
map.refresh();
setAllMap(map);
});
but it doesn't works. Could anyone say me why? I just want to remove the last marker that the user made by clicking on any marker she/he wants.
Thank you
Removing the marker object from the array will not remove the marker from the map. You have to call setMap(null) on the marker to do so. Just do markers[markers.length -1].setMap(null) and then pop() on the array;
Related
i want to add the InfoWindow in my code but it's not working. Map is showing perfectly but when i click the markers on map InfoWindow is not appearing. I also want to get the time in InfoWindow from MYSQL database. Please tell me how can i do this and what is the problem my InfoWindow is not appearing. Here is my InfoWindow Code:
var infowindow = new google.maps.InfoWindow();
var contentString = 'content';
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.addDomListener(window,'load',window.onload);
Marker:
var marker = new google.maps.Marker({position: markerpos,
map: map, icon: icon
});
Please refer the link below.
http://jsfiddle.net/RJPKJ/1/
for (i = 0; i < 5; i++){
var dataProperty = dataitem.property[i];
latitudetest =dataProperty.latitude;
longitudetest = dataProperty.longitude;
var data= dataProperty.property_title;
var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
}
I really searched everywhere but I can't find my mistake in my code. I have information that is dynamical loaded into a checkbox (I only have one checkbox on my html) because I do not know at advanced how many checkboxes I will need...
This is my code to check if my checkbox is checked, and what is in it. The value is lat,lng and title
$(".chkbx").on("change", function() {
var selected = new Array();
//marker.setVisible(false);
//map.removeOverlay(marker);
//marker.setMap(null);
$("input:checkbox[name=checkbox]:checked").each(function() {
selected.push($(this).val());
});
console.log(selected);
for(var i=0; i< selected.length ;i++)
{
var current = selected[i].split(';');
var blueIcon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,008CFF,000000&ext=.png';
var siteLatLng = new google.maps.LatLng(current[0], current[1]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: blueIcon,
animation: google.maps.Animation.DROP,
title: current[2],
//zIndex: sites[3],
html: current[2]
});
marker.setMap(map);
}
}
});
My markers show on my google map but it is impossible to remove them ... can someone please help me or suggest something?
So for each selected checkbox you create a marker. What you need to do is add those markers into an array that you can then reference later.
// global variable
var markers = [];
$(".chkbx").on("change", function() {
var selected = [];
// loop through all the markers, removing them from the map:
for (var marker in markers) {
marker.setMap(null);
}
// then you probably want to clear out the array, so you can then re-insert markers to it
markers = [];
$("input:checkbox[name=checkbox]:checked").each(function() {
selected.push($(this).val());
});
for(var i=0; i< selected.length ;i++)
{
var current = selected[i].split(';');
var blueIcon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,008CFF,000000&ext=.png';
var siteLatLng = new google.maps.LatLng(current[0], current[1]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: blueIcon,
animation: google.maps.Animation.DROP,
title: current[2],
html: current[2]
});
// you don't need this setMap here, you already specified map in your mapOptions:
// marker.setMap(map);
markers.push(marker);
}
});
I'm trying to have custom infowindows float above markers, however I noticed that only one marker can be opened at any one time. Is there a workaround to this?
Here's the code I have produced at the moment:
downloadUrl("AllActivityxml.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("id");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("venue_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))
);
var infowindow = new google.maps.InfoWindow();
var html = "<b>" + point + "</b>hello <br/>" + type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map,marker);
});
}
});
And when you check this map, notice that I cannot open more than 2 infowindows at once. Why is that?
There is no limitation implicit to the Google Maps API v3 that makes only one InfowWindow available at a time. You need to write your code to do that. If you want an InfoWindow for each marker, make one.
Some thing like (not tested):
function createMarker(latlng, html) {
var contentString = html;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
i am dealing with the Problem that my google Maps Page shows me an error in Firebug.
The clearLocations() function is fired when i search within my dealer map.
But this error is showing up: "markers[i].setMap is not a function"
Does anyone know how to solve that problem? I searched in several forums and groups, but i am using a google.maps.Marker array so i can't find my problem.
Thanks in advance!
Code ( clearLocations() ):
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
dealers.innerHTML = "";
}
Code ( load() ):
function load() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
//center: new google.maps.LatLng(51.30174, 10.60824),
zoom: 10,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
dealers = document.getElementById("dealers");
infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
So, if I understand correctly, the Markers array is an array of LatLongs? Or is it an array of type google.maps.Marker? If it's the former then there won't be any maps functions available to it as it's not a Google maps marker.
An option might be to make an array of the markers you place on the map like this.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
mapMarkers[i] = marker;
And then call
mapMarkers[i].setMap(null)
you can try this - just
console.log('=>'+markers.length);
for (var i = 0; i < markers.length; i++) {
console.log('===>'+markers[i]);
markers[i] = null;
}
markers = [];
console.log('==>'+markers.length);
This is my html code. I've try anything to add an infowindow on the markers but it don't wanna work. My data is loading from the "Alle_Ortswahlen.page1.xml" file.
Do anyone have an idea how can I add infoWindow to each marker?
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
</script>
Before the for cycle, make an empty infowindow object.
var infowindow = new google.maps.InfoWindow();
Than in the for cycle, after the marker, add an event listener, like this:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
There is some closure magic happening when passing the callback argument to the addListener method. If you are not familiar with it, take a look at here:
Mozilla Dev Center: Working with Closures
So, your code should look something like this:
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var stack = [];
var center = new google.maps.LatLng(48.136, 11.586);
var options = {
'zoom': 5,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var infowindow = new google.maps.InfoWindow();
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("You might put some content here from your XML");
infowindow.open(map, marker);
}
})(marker, i));
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});
}
So what you need to do is add some code, inside your for-loop, associating an infowindow onclick event handler with each marker. I'm assuming you only want to have 1 infowindow showing at a time, i.e. you click on a marker, the infowindow appears with relevant content. If you then click on another marker, the first infowindow disappears, and a new one reappears attached to the other marker. Rather than having multiple infowindows all visible at the same time.
GDownloadUrl("Alle_Ortswahlen.page1.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("ROW");
// just create one infowindow without any content in it
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("Field4"));
var lng = parseFloat(markers[i].getAttribute("Field6"));
var marker = new google.maps.Marker({
position : new google.maps.LatLng(lat, lng),
map: map,
title:"This is a marker"
});
// add an event listener for this marker
google.maps.event.addListener(marker , 'click', function() {
// assuming you have some content in a field called Field123
infowindow.setContent(markers[i].getAttribute("Field123"));
infowindow.open(map, this);
});
stack.push(marker);
}
var mc = new MarkerClusterer(map,stack);
});