var lats = ["56.1581702","56.1580875","56.1588094","56.1510389","56.15943499999999","56.1576479"];
var lons = ["13.767593300000044","13.752623399999948","13.764544","13.768728699999997","13.768018600000005","13.76731380000001"];
var i = 0;
var image = '/bilder/location.png';
for(lats.length > i) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lats[i], lons[i]),
icon: image
});
var i++;
}
Cant get this code to work, only a blank map is displayed.
Your for loop expression is invalid. Try this :
var lats = ["56.1581702","56.1580875","56.1588094","56.1510389","56.15943499999999","56.1576479"];
var lons = ["13.767593300000044","13.752623399999948","13.764544","13.768728699999997","13.768018600000005","13.76731380000001"];
var image = '/bilder/location.png';
for(var i = 0; i < lats.length; ++i) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lats[i], lons[i]),
icon: image
});
}
The developer tools available in modern browsers will help you to debug syntax errors in your code.
Related
This is a part of my code to display markers in map :
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
Markers are displayed from a table data.json
all it's working
Now In the properties of markers there is a index containing a number, and I just want display markers containing number 2 or 3 or 5, but not all markers.
It is possible ?
Thank you for your help
After a few time of work I have found the solution :
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 11; ++i) {
var Indice = data.photos[i].owner_id
if (Indice == 109117) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
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 am trying to hide a selected category of google map markers when an external javascript function hidetype() is called. To no avail.
I took the general concept from: http://www.geocodezip.com/v3_MW_example_categories.html
Below is the code that extracts my marker info from mysql derived XML. I have the markers grouped by type.
downloadUrl("phpsqlajax_genxml2_snow.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 point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "Some infoBubble HTML";
var Gtip = "<b>" + name + "</b>";
var icon = customIcons[type] || {};
var hover = icon.hover;
var hoverout = icon.icon;
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
});
marker.mytype = type;
bindInfoWindow(marker, map, infoWindow, html, Gtip, hover, hoverout);
}
});
}
function hidetype(category) {
alert(category);
for (var i=0; i<markers.length; i++) {
if (markers[i].mytype == category) {
markers[i].setVisible(false);
}
}
}
An example of how I'd externally try to remove markers is:
<img onclick="hidetype('1')" src=...>
This currently spits out an alert with the passed type variable but doesn't remove the markers. Thanks in advance!
I am trying to push some markers into google maps using the following code. But it does not seem working. The map is getting centred to the right position but the I can see the markers.
var points = [<asp:literal runat="server" id="litPoints"/>];
$(document).ready(function () {
var mapCenter = new google.maps.LatLng(<asp:literal runat="server" id="litMapCentre"/>);
var options = {
zoom:<asp:literal runat="server" id="litZoomLevel"/>,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#monitorMap")[0], options);
GetMap(map, points);
});
function GetMap(map, mappoints) {
var image=new google.maps.MarkerImage('../Images/map/iconr.png',
new google.maps.Size(20,32),
new google.maps.Point(0,0));
for(var i=1; i < points.length; i++) {
var m=points[i];
var mylatlng=new google.maps.LatLng(m[0], m[1]);
var marker=new google.maps.Marker({
position: mylatlng,
map: map,
icon: image});
}
}
Change the second function to be like this:
function GetMap(map, mappoints) {
var image=new google.maps.MarkerImage('../Images/map/iconr.png',
new google.maps.Size(20,32),
new google.maps.Point(0,0));
for(var i=0; i < mappoints.length; i++) {
var m=mappoints[i];
var mylatlng=new google.maps.LatLng(m[0], m[1]);
var marker=new google.maps.Marker({
position: mylatlng,
map: map,
icon: image});
}
You were creating a variable called mappoints, but then referring to it as points. Also javascript arrays are zero-indexed, so if looping over them you usually need to start at 0, not 1.
I've got this problem when removing a Marker from an array. I click on the map and place markers where i have clicked, the markers are then saved in an array. When removing them it only works in the order i have placed them but backwards, that means i place 1 2 3 but have to remove them like 3 2 1.
If i try to remove the markers in random order, the first one is removed, but then the others just stop working, the listener still works, but it seems like the forloop doesnt find the other markers in the array.
Any ideas? I'm completely lost.
Here is the code:
var map;
var tempLatLng;
var zoomLevel;
var markers = [];
var zoomLevels = [];
var count = -1;
var nullLatlng = new google.maps.LatLng(84.52,45.16);
var nullMarker = new google.maps.Marker({
position: nullLatLng,
});
function initialize() {
var myLatlng = new google.maps.LatLng(55.605629745598904,13.000441789627075);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//Puts a listener on the map, when clicking on the map, it places a marker.
google.maps.event.addListener(map, 'click', function(event) {
zoomLevel = map.getZoom();
document.getElementById("zoom").value = zoomLevel;
tempLatLng = event.latLng;
setTimeout("placeMarker(tempLatLng)", 800); //placeMarker is called with a duration so that //doubleclicking doesn't bother the placement.
});
}
//Function to place markers.
function placeMarker(location) {
if(zoomLevel == map.getZoom()){
if(true){
var marker1 = new google.maps.Marker({
position: location,
map: map,
draggable:true
});
count = count + 1;
markers[count] = marker1;
document.getElementById("count").value = count;
google.maps.event.addListener(marker1,'rightclick', function(event){
document.getElementById("test2").value = "funkar";
for(var i = 0 ;i < markers.length ;i++){
if(markers[i].getTitle() == marker1.getTitle()){
marker1.setMap(null);
document.getElementById("markerpos").value = markers[i].getTitle();
document.getElementById("test1").value = markers[i].getTitle();
count = count - 1;
document.getElementById("count").value = count;
markers[i] = nullMarker;
}
}
});
marker1.setTitle(location.toString());
}
map.setCenter(location);
}
}
Here is the JSFiddle Demo:
Basically, you were using var count to keep track of the number of markers. You can do markers.length for that. Instead of using markers[count] you can use native array's push method to add element into the array. To remove use splice(i, 1); where i is the element's position and remove 1 element from that position. Also, to check if two markers are equal or the "same" instead using getTitle() use === which does:
is exactly equal to (value and type)
The problem is if you create two or more markers on the same position it would remove both markers but in reality you only remove one of the two "clones" and thus leaving a marker un-removable. This is caused by using getTitle which returns lat lng and if you have two markers w/ same lat lng you have an issue. Also, i changed, within your onclick function, marker1 to this which are referring to the same object for readability.
//Function to place markers.
function placeMarker(location) {
if (zoomLevel == map.getZoom()) {
if (true) {
var marker1 = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
count = count + 1;
markers.push(marker1);
document.getElementById("count").value = markers.length;
google.maps.event.addListener(marker1, 'rightclick', function(event) {
document.getElementById("test2").value = "funkar";
for (var i = 0; i < markers.length; i++) {
if (markers[i] === this) {
this.setMap(null);
document.getElementById("markerpos").value = markers[i].getTitle();
document.getElementById("test1").value = markers[i].getTitle();
markers.splice(i, 1);
document.getElementById("count").value = markers.length;
}
}
});
marker1.setTitle(location.toString());
}
map.setCenter(location);
}
}