Click here to Skip to main content
15,072,776 members
Please Sign up or sign in to vote.
4.50/5 (2 votes)
See more:
Hello to all!

I am using geocode API3 and the code is working fine, but the problem is when I call codeAddress function through dropdown change event. It increases the marker in the map. I am creating a marker in codeAddress that's increased on every call of the function codeAddress. I want a single marker displayed at every call of my codeAddress function.

Here is my code:
JavaScript
function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        marker = new google.maps.Marker({
            map: map,
            draggable: true,
            position: results[0].geometry.location
        });
        google.maps.event.addListener(marker, 'drag', function(event) {
        document.getElementById('<%= txtLatitude.ClientID %>').value = marker.getPosition().lat();
        document.getElementById('<%= txtLongitude.ClientID %>').value = marker.getPosition().lng();
        document.getElementById('<%= HFLat.ClientID %>').value = marker.getPosition().lat();
        document.getElementById('<%= HFLng.ClientID %>').value = marker.getPosition().lng();
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });


HTML
<select name="address" id="address" onchange="codeAddress();" >
    <option value="India">India</option>
    <option value="Australia">Australia</option>
    <option value="Pakistan">Pakistan</option></select>


Can anyone help me please?
Posted
Updated 27-Feb-11 23:11pm
v3

1 solution

If you want to keep using the same marker you must change your code as you're always creating a new google.maps.marker in your function. You may try it like this:
JavaScript
var myPermanentMarker = new google.maps.Marker({
                              map: map,
                              draggable: true
                        });
google.maps.event.addListener(myPermanentMarker , 'drag', function(event){
    document.getElementById('<%= txtLatitude.ClientID %>').value = myPermanentMarker.getPosition().lat();
    document.getElementById('<%= txtLongitude.ClientID %>').value = myPermanentMarker.getPosition().lng();
    document.getElementById('<%= HFLat.ClientID %>').value = myPermanentMarker.getPosition().lat();
    document.getElementById('<%= HFLng.ClientID %>').value = myPermanentMarker.getPosition().lng();
});



JavaScript
function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK)
        {
            myPermanentMarker.position = results[0].geometry.location;
            map.setCenter(results[0].geometry.location);
        }
        else
        {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
   
v5
Comments
balongi 28-Feb-11 5:31am
   
By using as your suggestion now, no marker is displayed on map
Manfred Rudolf Bihy 28-Feb-11 6:14am
   
Sorry I made a mistake. The creation and hooking up the eventhandler has now been moved out of the codeAddress function. Once the marker is created and the event handler is setup for the marker all that is left to do in the codeAddress function is to center the map and set the position of the marker.
Manfred Rudolf Bihy 28-Feb-11 7:23am
   
Does it work now? If it does please accept my answer. Thank you!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900