Require JS, Google Geocoding - same-origin Issue

Question

What I'm doing and what I've tried

I'm using Google Geo coding web service to get the latitude and longitude of an address I pass, like this:

$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=Boston&sensors=true",function(data){
    //Do my programming here
});

It was, for some reason working perfectly, initially, but then it stopped working and and I discovered this was the issue, that is using Google client side API.

I also read the answer on that SO question, which says the <script> tags help get over the cross site scripting issue.

My problem :

I'm using RequireJs, so I include the files like this :

var Google = require("http://maps.google.com/maps/api/js?sensor=false");

So, how do I get my Google API working again and how do I do that with requireJS

Just a note that `$.getJSON("string", function(data){ }` needs a closing `);` — Kriem, Feb 18 '13 at 14:12
@Kriem , thanks for pointing it out , but that was just a typo :) — Nishant Jani, Feb 18 '13 at 14:51

score 1 · Accepted Answer · edited May 23 '17 at 12:12

requirejs will load the Maps-API asynchronous, but the URL you have used cannot be used for asynchronous loading(see async loading javascript with document.write) .

What to do: add the callback-parameter to the URL to be able to load the Maps-API asynchronously and execute the google-maps-related code in a function with a name equal to the value of the provided callback-parameter.

function geocodeaddr(){
  var geocoder = new google.maps.Geocoder();
      geocoder.geocode({ 'address': 'Boston' }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0].geometry.location);
         }
         else {
            console.log("Geocoding failed: " + status);
         }
      });
}
require(["http://maps.google.com/maps/api/js?sensor=false&callback=geocodeaddr"]);

Require JS, Google Geocoding - same-origin Issue

1 Answers1