CODEWITHSUNDEEP
javascriptjquerygoogle-maps
user1881482
user1881482

Reputation: 746

No geolocation on google maps, how to ask for persons location

I currently am using google maps and plotting a persons position using geolocation. I have used the code from the google example that allows for a nogeolocation response, it basically asks for a hardcoded set of coordinates. What I am trying to do is have a js modal popup with a select box with a list of cities. When one of the cities is selected the map would then populate to that city. I have a list of cities and values associated to them are there coordinates. I believe the problem I am having with my current code is it is skipping past the variable before it is able to be set by the drop down box.

.js

    function handleNoGeolocation(errorFlag) {
        if(errorFlag == true) {
            //alert("Geolocation service failed.");
            $('#myModal').modal('show');
            $('#citiesList').change(function(){
                var location = $(this).val();
                parseFloat(location);
            });
            initialLocation = new google.maps.LatLng(location);
        } else {
            alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
            initialLocation = siberia;
        }
        map.setCenter(initialLocation);
    }

.html

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <select id="citiesList" class="form-control">
            <option value=''>Select City...</option>
            <option value="53.5412083, -113.29573650">Sherwood Park</option>
            <option value="51.04532,-114.058106">Calgary</option>
           </select>
          </div>
        </div>
      </div>
    </div>

Upvotes: 1

Views: 201

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

you are creating a variable within your change event function and then trying to use it outside it, where it isnt visible. While Javascript is synchronous, the change event isnt being fired here it is just being set, so when the change event has fired the code in handleNoGeolocation has already been executed.

$('#myModal').modal('show');
$('#citiesList').change(function(){
   //creates a local scope variable 'location' visible only in this function
   var location = $(this).val();
   //note this isnt being used as you are not setting the result to anything
   parseFloat(location);
});
//'location' here is undefined 
initialLocation = new google.maps.LatLng(location);

do your calls within the change function where it can see the variable

EDIT:

$('#myModal').modal('show');
$('#citiesList').change(function(){
   var location = $(this).val();
   //splits the string on ',', so we can use the lat lng separately 
   location = location.split(",");
   //use $.trim to remove any of the whitespaces
   initialLocation = new google.maps.LatLng($.trim(location[0]),$.trim(location[1]));
   map.setCenter(initialLocation);
});

Upvotes: 2

Related Questions