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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 24, 2014 at 20:49

MrUpsidown

22.5k15 gold badges83 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Locke Over a year ago

Ah thank you very much. Using this setup is it possible to get the next page of results?

MrUpsidown Over a year ago

Yes. Everything is in the documentation with an example.

Collectives™ on Stack Overflow

Google maps api client side json in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related