Google Map search nearest location from zip

Question

I've a start point zip : 10010 and an array of zips {10011,11015,11008}

Now, I want to find lowest path between start point and arrays zips.

I'm trying google v3 apis for searching. But now successful. Any suggestion ?

I'm using : https://maps.googleapis.com/maps/api/distancematrix/json?origins=10010&destinations=10011|10012&key=AIzaSyBOsjeskUwOLYQZntsv7_34gVZ3xgcXko0

Here is my code:

jQuery(function() {
                jQuery("input#search_clinic").click(function() {
                var start_point = jQuery("input#zip_code").val();
                alert(start_point);
                var search_zip = "";
                jQuery("select#select_location option").each(function()
                {
                    var option_val =  jQuery(this).val();
                    alert(option_val);
                    search_zip += option_val + "|";

                });


        var api_key = "AIzaSyBOsjeskUwOLYQZntsv7_34gVZ3xgcXko0";
                var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="+start_point+"&destinations="+search_zip+"&key=AIzaSyBOsjeskUwOLYQZntsv7_34gVZ3xgcXko0";

                jQuery.ajax({
                    dataType: "json",
                    url: url,
                    success: function( data ) {
                    alert(data);
                  },
                    error: function(e) {

                    }

              });

            });
            });

But return :

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/distancematrix/json?origins=10010&destinations=44004|44060|&key=AIzaSyBOsjeskUwOLYQZntsv7_34gVZ3xgcXko0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://belsonohearingcenters_two' is therefore not allowed access.

Check this: https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource — hatzaviv, Aug 07 '17 at 12:29
Please view my answer. Also, it will be good to include a working Fiddle with your questions as well. — David Hope, Aug 07 '17 at 12:55

score 0 · Answer 1 · answered Aug 07 '17 at 12:52

You need to use JSONP instead of JSON in your AJAX.

This is an example:

$.ajax({
            url: url, 
            type: "GET",   
            dataType: 'jsonp',
            cache: false,
            success: function(response){                          
                alert(response);                   
            }           
        });

JSONP (JSON with Padding) is a method commonly used to bypass the cross-domain policies in web browsers. (You are not allowed to make AJAX requests to a web page perceived to be on a different server by the browser.) JSON and JSONP behave differently on the client and the server.

Source:

Can anyone explain what JSONP is, in layman terms?

Google Map search nearest location from zip

1 Answers1