How do I display custom locations in the Google Maps API search results?

Question

So there is this basic google map example with a search field: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

I want to make something very simple. I would just like to copy some locations (maybe some simple array / object with their latitudes and longitudes), and then when you search for a place like Washington, then these places are displayed (with a marker) if some of of them they really are in Washington. If I’m looking for “Africa,” and some of my places are inside Africa, I want them to be displayed. And if I am looking for a place in which there is not one of my locations, then they simply should not be displayed.

I also found this - https://developers.google.com/places/documentation/actions#adding_a_place . But I'm not sure if this is what I should use for my purpose (or should I?). And if so, I'm not sure how to use it - where can I send the proposed JSON data?

Thanks in advance!

Answer 1

Ok, I decided! I would like to tell how this is done ... I have to say that the world of programming is new for me, and it is very interesting :) And this is the first time I used any API ... Here is a working example: http: / /codepen.io/everdimension/pen/LpfEH?editors=001

Explanations:

So, the first thing you need to know is to add markers. This can be easily found in the map API documentation. The marker is added as follows:

var marker = new google.maps.Marker({ marker_properties });

So how can we add all the markers for your places? Well, you just iterate over places that have coordinates. First, create an array of places:

 var random_places = [ ['Moscow1', 55.822083, 37.665453, 4], ['Moscow2', 55.604697, 37.642107, 4], ['Lisbon1', 38.749402, -9.120034, 4], ['Lisbon2', 38.708960, -9.169130, 4], ['NewYork1', 40.784513, -73.976630, 4], ['NewYork2', 40.707522, -74.037055, 4], ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; 

So now go through these places and add a marker every time:

 for (var i = 0; i < random_places.length; i++) { var beach = random_places[i]; var myLatLng = new google.maps.LatLng(beach[1], beach[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: beach[0], }); }; 

So, this code just uses the basic API functions and should not be a problem. But all the markers that we created all the time exist on the map, regardless of whether they are within visible boundaries or not. But we want the markers to be displayed only if they are in the part of the map that we are looking at. Now about what I talked about. And here is how we can do it.

Keyword bounds . It turns out that with the map API we can make the following event listener:

google.maps.event.addListener(map, 'bounds_changed', function() { ... });

And the function will be executed every time the borders of the maps are changed! We need to check if the markers fall into the current boundaries, and if they do, we will create them. So here:

 var place_markers = []; google.maps.event.addListener(map, 'bounds_changed', function() { var bounds = map.getBounds(); searchBox.setBounds(bounds); // not needed for our purpose, it adds bias to new searches var NE = bounds.getNorthEast(); var SW = bounds.getSouthWest(); // Iterate through all places for (var i = 0; i < random_places.length; i++) { var place_arr = random_places[i]; // Check if a place is within bounds - not best way, explained later if ( (NE.lat() > place_arr[1] && place_arr[1] > SW.lat()) && (NE.lng() > place_arr[2] && place_arr[2] > SW.lng()) ) { var myLatLng = new google.maps.LatLng(place_arr[1], place_arr[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: place_arr[0], }); place_markers.push(marker); } }; }); 

What is it! Now markers are created only when they are inside the visible part of the map! You may have noticed that I also created an empty place_markers object, and then clicked all the created ones marked in it. What for? Because we need to do one more thing. We want to delete all created markers if they go beyond the current borders! Therefore, every time the boundaries change, we would like this code to be executed:

 // Remove out of bounds markers for (var k = 0; k < place_markers.length; k++) { var one_marker = place_markers[k]; if (!bounds.contains(one_marker.getPosition())) { one_marker.setMap(null); } } 

You can see that here I used the built-in function bounds.contains() to check if the created marker is within the bounds. The same function can also be used when creating markers, but I decided to leave such code to show the process of finding the right solution. The main thing is that markers are now deleted when they go beyond the boundaries and are created when they are inside!

One more thing I have to say. This is not the only way to complete the task that I wanted. This can be done in many other ways. I found a step-by-step explanation of the advanced way to use PHP and MySQL: https://developers.google.com/maps/articles/phpsqlsearch_v3

I hope this will be useful for those who, like me, are new to the Google Maps api.