6 Replies - 506 Views - Last Post: 25 July 2014 - 11:28 AM

#1 munchlaxxx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 20-October 12

onClick not working + Google Maps API help

Posted 24 July 2014 - 10:45 PM

This is what I was trying to do: The user enters an address, which is autocompleted by Google. Then when they press the submit button, an alert box pops up, telling them whether the address entered is within 5 miles of (42.352487, -71.079290). Then a confirm box pops up asking if they would like to proceed to the next page.

Nothing happens when I click the submit button. codeAddress() is never triggered. How can I get the button to work?
Also, I would appreciate any tips or glaringly obvious errors that you notice. I'm still new to Javascript.

Here is my search box and submit button:

<input id="searchTextField" type="text" size="60"><button id="search" type="button" onclick="codeAddress();">Submit</button>


And the Javascript:

 <script type="text/javascript">
//GOOGLE AUTOCOMPLETE
function initialize() {
var input = document.getElementById('searchTextField');
    var options = {componentRestrictions: {country: 'us'}};
    new google.maps.places.Autocomplete(input, options);
}
    google.maps.event.addDomListener(window, 'load', initialize);
    function getDistance( latA, longA, latB, longB ) //haversine formula to get the radius of the points
{  
    var a = Math.sin((latA - latB).toRad()/ 2) * Math.sin((latA - latB).toRad() / 2) +
            Math.cos(latB.toRad()) * Math.cos(latB.toRad()) *
            Math.sin((longA - longB).toRad() / 2) * Math.sin((longA - longB).toRad() / 2);
    var d = 3963.1676 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // 3963.1676  is the radius of the earth in miles
    return d; 
}
function codeAddress() {
    geocoder = new google.maps.Geocoder();
    var address = document.getElementById("searchTextField").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      var latitude = results[0].geometry.location.lat();
      var longitude = results[0].geometry.location.lng();
      var distance = getDistance( 42.352487, -71.079290, latitude, longitude );
if( distance < 5 ){                                            //if the address entered is within 5 miles of (42.352487, -71.079290)
    alert( "You're in luck! We can deliver to your address.");
    var next_page = confirm("Proceed?");
if(next_page == true)
{
window.location="food.php";
}
} else {
    alert( "Sorry, we cannot deliver to the address you have entered.");
    window.location = "homepage.php";
}
      } 
    });
</script>


Is This A Good Question/Topic? 0
  • +

Replies To: onClick not working + Google Maps API help

#2 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,933
  • Joined: 30-April 10

Re: onClick not working + Google Maps API help

Posted 24 July 2014 - 11:28 PM

Quote

Nothing happens when I click the submit button. codeAddress() is never triggered. How can I get the button to work?


What about errors in the developers console?
Was This Post Helpful? 0
  • +
  • -

#3 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,933
  • Joined: 30-April 10

Re: onClick not working + Google Maps API help

Posted 24 July 2014 - 11:37 PM

Also you don't need the ; in this line.

onclick="codeAddress();"



I would suggest you move away from the onclick html call also, move to an event handler.

There is also a great link in my signature for event handling.

This post has been edited by laytonsdad: 24 July 2014 - 11:39 PM

Was This Post Helpful? 0
  • +
  • -

#4 munchlaxxx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 20-October 12

Re: onClick not working + Google Maps API help

Posted 25 July 2014 - 07:53 AM

View Postlaytonsdad, on 24 July 2014 - 11:28 PM, said:

Quote

Nothing happens when I click the submit button. codeAddress() is never triggered. How can I get the button to work?


What about errors in the developers console?


Uncaught SyntaxError: Unexpected end of input

I also got rid of the semicolon you pointed out.

And thanks, I'll look into event handlers

This post has been edited by laytonsdad: 25 July 2014 - 11:44 AM
Reason for edit:: removed un-needed quote

Was This Post Helpful? 0
  • +
  • -

#5 munchlaxxx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 20-October 12

Re: onClick not working + Google Maps API help

Posted 25 July 2014 - 08:32 AM

I added this:
$(document).ready(function(){
$( "#search" ).click(function() {
 codeAddress();
});

And now the button works. :) But now I'm getting an error at line 11 in the getDistance function: Uncaught TypeError: undefined is not a function
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 485
  • View blog
  • Posts: 1,816
  • Joined: 15-January 14

Re: onClick not working + Google Maps API help

Posted 25 July 2014 - 08:58 AM

Number.toRad is not a function, not unless you've explicitly defined it somewhere.
Was This Post Helpful? 0
  • +
  • -

#7 munchlaxxx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 20-October 12

Re: onClick not working + Google Maps API help

Posted 25 July 2014 - 11:28 AM

View PostArtificialSoldier, on 25 July 2014 - 08:58 AM, said:

Number.toRad is not a function, not unless you've explicitly defined it somewhere.

Thanks, lol. I saw .toRad() on another site and I thought it was a function already built into Javascript. I just defined it now and my code is working perfectly. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1