1. I am using google map v3
2. I can't give a link to the code because it is currently behind a
firewall
3. I have been googling all week and read/copied any code I could find
4. I know it is done via pushing my markers to a markers[]array and
somehow removing it via markers[i].setmap(null)
but I still can't get it.
Scenario
User is presented with a set of radio buttons. Using Jquery, when they
select a radio button and conditional/different options appear, eg if
they select radio button 'postcode' , and a postcode input text
appears. They enter a postcode, and a map appears centered on the
returned lat/lng. They click on map (any number of times) and a
marker appears for each click. They click on any marker, and an
infowindow with a form in it appears, which they fill out and hit
save.
That much I have working.
But I also want a link in the infowindow to say 'remove marker' in
case they have clicked on the map and placed a marker they don't want.
Any other comments also welcome
code I have
[code]
// JQUERY functions
$(document).ready(function() {
.. bunch of stuff to make divs show or not show...
// used for postcode or town look up
$(".viewMap").click(function(e) {
var address =$(this).prev().find('input').val();
getLatLngFromPostcode(address, load);
});
});
var map;
var markers = [];
var infoWindow;
var countMarkers = 0;
var markerId;
// used http://code.google.com/apis/maps/articles/phpsqlsearch_v3.html
alot here
function load(lat, lng) {
var surveyOptions = {
center: new google.maps.LatLng(lat,lng),
zoom: 18,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.SATELLITE,
navigationControlOptions: {
style:
google.maps.NavigationControlStyle.ZOOM_PAN
}
};
map = new google.maps.Map(document.getElementById("map"),
surveyOptions);
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function(event) {
closeInfoWindow();
createMarker(event.latLng);
});
}
function createMarker(location) {
countMarkers++;
marker = new google.maps.Marker({
position: location,
map: map,
draggable: true,
icon: 'icon.png'
});
// trying to gqt a unique id for the marker so we can delete a
specific one
marker.markerId = countMarkers;
// make an array of all the markers so we can count
markers.push(marker);
markerId = marker.markerId;
map.setCenter(location);
markerLat = location.lat();
markerLng = location.lng();
google.maps.event.addListener(marker, 'click',
handleMarkerClick(markers, marker, markerLat, markerLng, markerId));
}
// have to have a function to map the number of the map to each
instantiation
function handleMarkerClick(markers, marker, markerLat, markerLng,
markerId) {
return function() {
var html = "<form action='#' onsubmit='saveData(this);
return
false'><table>" +
"<tr><td>Test</td> <td><input type='hidden'
id='test' value='"+markerId+"'/>"+ markerId+"</td> </tr>" +
"<tr><td>Height (est)</td> <td><input
type='text' id='height'/></td> </tr>" +
"<tr><td><input type='hidden' id='lat'
value='"+markerLat+"'/><input type='hidden' id='lng' value='"+markerLng
+"'/></td>"+
"<td><input type='submit' value='Save &
Close'/></td></tr></table></
form>"+
"<a href=\"#\"
onClick=\"removeMarker("+markerId+")\">Remove
marker</a>";
infoWindow.setContent(html);
infoWindow.open(map, marker);
};
}
// ref:
http://www.tomanthony.co.uk/blog/geocoding-uk-postcodes-with-google-map-api/
function getLatLngFromPostcode(postcode, callbackFunction) {
var localSearch = new GlocalSearch();
localSearch.setSearchCompleteCallback(null,
function() {
if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
callbackFunction(resultLat, resultLng);
} else {
alert("The postcode/town you entered '" +
postcode + "' was not
found. Please try again.");
}
});
localSearch.execute(postcode + ", uk");
}
function saveData(form) {
var test= escape(document.getElementById("test").value);
var url = "phpsqlinfo_addrow.php?test=" + test +
"&lat=" + lat +
"&lng=" + lng;
downloadUrl(url, function(data) {
var results = data;
closeInfoWindow();
// debugging
document.getElementById("message").innerHTML = results;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
function closeInfoWindow() {
infoWindow.close();
}
function removeMarker(markerId) {
// this says markers[markerId] = undefined
markers[markerId].setMap(null);
// this show the marker id fine
//alert(markerId);
}
</code>
thanks
I will post clean working code when it works for others to use.
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
