Click here to Skip to main content
13,000,982 members (59,586 online)
Rate this:
 
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 4-Aug-14 17:26pm
   
an element id should be unique.
   
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 5-Aug-14 8:27am
   
How I can make different IDs. Can you please show me in code.
   
Just make them different. No two should be the same. Do it by your hands.
—SA
WarEagle08 5-Aug-14 14:11pm
   
Thanks, I'm trying!
   
You are welcome.
—SA
danigeraleddin 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 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 5-Aug-14 9:17am
   
You can use something like that I put in the solution and improve it.
WarEagle08 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 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
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.170624.1 | Last Updated 5 Aug 2014
Copyright © CodeProject, 1999-2017
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