Google Maps Markers Glitch

The problem is with the “Bicycle Store” and “Custom Marker 2”.

The Javascript should locate the nearest bicycle stores within a radius of 1600 metres and place a custom marker on the map displaying where it is.

The following only returns [B][U]one[/U][/B] bicycle store using a custom marker.

[CODE]var image2 = ‘../images/logo_marker2.png’;
var marker2 = null;

…

// Bicycle Store
var request2 = {
location: latlon,
radius: ‘1600’,
types: [‘bicycle_store’]
};
infowindow2 = new google.maps.InfoWindow();
var service2 = new google.maps.places.PlacesService(map);
service2.nearbySearch(request2, callback2);

function callback2(results2, status2) {
if (status2 == google.maps.places.PlacesServiceStatus.OK) {
for (var i2 = 0; i2 < results2.length; i2++) {
var place2 = results2[i2];
createMarker2(results2[i2]);
}
}
}

function createMarker2(place) {
var placeLoc2 = place.geometry.location;

// Custom Marker 2
if (marker2 !== null) {
marker2.setPosition(place.geometry.location);
} else {
marker2 = new google.maps.Marker({
position: place.geometry.location,
map: map,
icon: image2,
title: “Bicycle Store”
});
google.maps.event.addListener(marker2, ‘click’, function () {
infowindow2.setContent(place.name);
infowindow2.open(map, this);
});
marker2.setPosition(place.geometry.location);
}
}[/CODE]

However, when I remove the following:

[CODE]var image2 = ‘../images/logo_marker2.png’;
var marker2;

…

// Bicycle Store
var request2 = {
location: latlon,
radius: ‘1600’,
types: [‘bicycle_store’]
};
infowindow2 = new google.maps.InfoWindow();
var service2 = new google.maps.places.PlacesService(map);
service2.nearbySearch(request2, callback2);

function callback2(results2, status2) {
if (status2 == google.maps.places.PlacesServiceStatus.OK) {
for (var i2 = 0; i2 < results2.length; i2++) {
var place2 = results2[i2];
createMarker2(results2[i2]);
}
}
}

function createMarker2(place) {
var placeLoc2 = place.geometry.location;

// Custom Marker 2
marker2 = new google.maps.Marker({
position: place.geometry.location,
map: map,
icon: image2,
title: “Bicycle Store”
});
google.maps.event.addListener(marker2, ‘click’, function () {
infowindow2.setContent(place.name);
infowindow2.open(map, this);
});
marker2.setPosition(place.geometry.location);
}[/CODE]

It highlights [B][U]all[/U][/B] of the bicycle stores within 1600 metres of my location using my custom marker.

However, every time my position updates, the markers used to highlight each bicycle store [B][U]duplicate[/U][/B] on top of one another.

How can I resolve this annoying problem?

Also in #JavaScript _↴