Click here to Skip to main content
11,702,396 members (70,841 online)
Rate this: bad
good
Please Sign up or sign in to vote.
Trying to run the GeoCode function and call it from two different DIV IDs. It works fine with the first div (Where I'm calling it from US States drop-down list) but not with the second (Canada States drop-down list).

Javascript Code looks like this:

var geocoder;
var map;
 
function initialize() {
 
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42, -99);
    var mapOptions = {
        zoom: 5,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);
 
            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Your Geo-Location',
                maxWidth: 200
            });
 
            var marker = new google.maps.Marker({
                position: pos,
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 5,
                },
                draggable: true,
                map: map
            });
 
            //Uncomment the function below if you want to change the center to the user's location
            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
}
 
function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }
}
 
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);
            map.setZoom(7);
            //This is the variable thats let us display the icon on the selected location from the drop-down
            // var marker = new google.maps.Marker({
            //map: map,
            //position: results[0].geometry.location
            //});
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}
 
google.maps.event.addDomListener(window, 'load', initialize);


HTML looks like this:

<select id="address" value="Geocode" onchange="codeAddress()">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
    <option value="Arizona,AZ">Arizona</option>
    
</select>
<select id="address" value="Geocode" onchange="codeAddress()">
    <option>Select</option>
    <option value="Alberta,AB">Alberta</option>
    
</select>
Posted 4-Aug-14 10:56am
Comments
BacchusBeale at 4-Aug-14 17:26pm
   
an element id should be unique.
Sergey Alexandrovich Kryukov at 4-Aug-14 17:44pm
   
That's correct, the values of id must be unique on the page, but they aren't. Would you post it as your answer? it may resolve the OP's problem.
—SA
WarEagle08 at 5-Aug-14 8:27am
   
How I can make different IDs. Can you please show me in code.
Sergey Alexandrovich Kryukov at 5-Aug-14 13:49pm
   
Just make them different. No two should be the same. Do it by your hands.
—SA
WarEagle08 at 5-Aug-14 14:11pm
   
Thanks, I'm trying!
Sergey Alexandrovich Kryukov at 5-Aug-14 14:51pm
   
You are welcome.
—SA
danigeraleddin at 4-Aug-14 18:19pm
   
Change the id of the two select so that they are different, and adds a parameter to the function codeAddress, use the select element to pass as a parameter to the function in the onchange event according to the Select.
WarEagle08 at 5-Aug-14 8:26am
   
Hi, Can you please explain that in code, how can I do it. I'm very new to JS.
danigeraleddin at 5-Aug-14 9:17am
   
You can use something like that I put in the solution and improve it.
WarEagle08 at 5-Aug-14 10:28am
   
Thanks for putting efforts. It seems there is something else which is not allowing me to use the code this way. Trying to figure out.
danigeraleddin at 5-Aug-14 11:07am
   
Hi, I made a mistake, I placed önchange instead onchange, I think it is a matter of google code, also i'm not sure if geocode value should be for both cases, I hope you can resolve it.

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

I am also a beginner, but I hope to help, You can use something like:
ASP Code:

<select id="address1" value="Geocode"  onchange="codeAddress('address1')">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
    <option value="Arizona,AZ">Arizona</option>
    
</select>
<select id="address2" value="Geocode" onchange="codeAddress('address2')">
    <option>Select</option>
    <option value="Alberta,AB">Alberta</option>
    
</select></select>

Javascript Code:

function codeAddress(element) {
    var address = document.getElementById(element).value;
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.setZoom(7);
            //This is the variable thats let us display the icon on the selected location from the drop-down
            // var marker = new google.maps.Marker({
            //map: map,
            //position: results[0].geometry.location
            //});
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}
  Permalink  
v4

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

  Print Answers RSS
0 Maciej Los 505
1 Sergey Alexandrovich Kryukov 355
2 OriginalGriff 299
3 CHill60 145
4 Andy Lanng 99
0 OriginalGriff 8,369
1 Sergey Alexandrovich Kryukov 7,547
2 CPallini 4,922
3 Maciej Los 4,411
4 Mika Wendelius 3,556


Advertise | Privacy | Mobile
Web02 | 2.8.150819.1 | Last Updated 5 Aug 2014
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100