Adding custom markers on top of a google maps search result

0

I am not sure this fits as a valid question here but i will try. I have searched on the topic but found just information for a static map view.

I would like to display custom markers on a google map after a search for a particular address.

For example i have few addreses of places in a particular city. Now i want to search for a new one in google maps. On the result for this search (a map with a pin showing the searched place) i want do display the other places as well.

I just want verify which of my already known places is near the new search just by looking at the result on the map.

I really want to know if this is somehow possible to do. Maybe a hint for what i should search exactly to read into the topic. All i found so far seems not to suit for that particular use case i want.

What i imagine is a page with some java script maybe that embeds the google maps search and takes care of the overlay of markers from a dataset of places.

Is this something i can do with the maps api from google?

user1052226

Posted 2015-10-08T17:53:44.510

Reputation: 1

Are you building your own app, or you're trying to achieve that in the browser? Do you have any code to share? – kenorb – 2015-10-08T18:08:16.140

No i am not building an app. I want to have a local page i can call in the browser. It should provide the google maps page embedded where i would be able to search. Now when the result is shown, i would like to have additional markers in the resulting map. I have no code so far, just investigating whether this can be done because i had no luck so far for finding examples for that type of use case. – user1052226 – 2015-10-08T18:36:23.677

Answers

0

You are looking for Google Maps Javascript API where you can use the appropriate API.

Please follow the provided examples for further information (e.g. Simple markers).

Example code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=API_KEY&signed_in=true&callback=initMap"></script>
  </body>
</html>

If you're looking to add it on top of the search results, see: Place searches example.

kenorb

Posted 2015-10-08T17:53:44.510

Reputation: 16 795

1Thanks, that Place Searches Example got me going. Just added my other places to the code and they are displayed along the found results. Actually pretty straight forward. Thanks again for taking the time. – user1052226 – 2015-10-09T09:35:36.753

Asked: 2015-10-08T17:53:44.510

Viewed: 1 857 times

Active: 2015-10-08T18:15:22.800