Still struggling with this one. Any ideas? Thanks!
On Feb 19, 4:19 pm, kathb4 <[email protected]> wrote: > 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; > > // usedhttp://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-m... > 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.
