Google maps api client side json in javascript

Question

So I am sure that there is a simple solution to my problem but I just can't seem to find an answer. I have an application that has two users place map markers onto a google maps map (and they can see eachothers markers). I want to find the average latitude and longitude and then use the Places API to get JSON that contains nearby locations from that average so the users can decide on a middle ground.

My problem is occurring with getting getting the JSON. Because it is cross domain I can't just use an AJAX call (and the API does not support jsonp). So I was hoping to do this client side in javascript. There are numerous tutorials out there for how to use the Places API when an actual map is on the screen, so how could I do this without the map and just the JSON data?

My application is using JavaScript, JQuery, and Java (a Jersey REST service). I read that there are ways to set up cross domain calls but those all seemed to apply to PHP.

Answer 1

If your application displays Places API data on a map, that map must be provided by Google.

If your application displays Places API data on a page or view that does not also display a Google Map, you must show a "Powered by Google" logo with that data. For example, if your application displays a list of places on one tab, and a Google Map with those places on another tab, the first tab must show the "Powered by Google" logo.

The following ZIP file contains the "Powered by Google" logo in the correct sizes for desktop, Android and iOS applications. You may not resize or modify these logos in any way.

Download: powered-by-google.zip

Read here: https://developers.google.com/maps/documentation/javascript/places#LogoRequirements

To use the Places library, just include the library in the API call and give the Places Service an HTML element instead of a map object:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

Code:

var request = {
    location: new google.maps.LatLng(52.48,-1.89),
    radius: '500',
    types: ['store']
};

var container = document.getElementById('results');

var service = new google.maps.places.PlacesService(container);
service.nearbySearch(request, callback);

function callback(results, status) {

    if (status == google.maps.places.PlacesServiceStatus.OK) {

        for (var i = 0; i < results.length; i++) {

            container.innerHTML += results[i].name + '<br />';
        }
    }
}

JSFiddle demo