Highlight 2 places in a single map without using search box

Question

I want to highlight 2 places in google maps like the image below(could not show two places highlighted, i have just shown the border style that i will implement).
I want to show border of place exactly like the image below.
I want to dynamically mark places based on place name.
For example I don't have lat long values so ,so I have to search by name of
place.

@xomena how its duplicate when i clearly asked without search box and multiple places highlighted in a single map. — Dragon, Oct 01 '17 at 18:42

syciphj · Answer 1 · 2017-09-27T00:29:59.357

Right now, to do this using the Google Maps Javascript API, you'll need external data to show the borders of each place. Having it internal to the Javascript API is already being requested here in Google's Issue Tracker: https://issuetracker.google.com/issues/35816953

As a workaround though, you can use the Maps Embed API to mimic the behavior you outlined in your post. Here's a sample: Be sure to replace YOUR_API_KEY_HERE with your own API key.

var input = document.getElementById('location');
var autocomplete;

function initPlaces() {
  autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      alert('Error with your search for ' + place.name);
    }
    
    if(place.place_id) {
      markLocation(place.place_id);
    }
  })
}

function markLocation(placeId) {
  var url = 'https://www.google.com/maps/embed/v1/place?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY';
  var placeStr = '&q=place_id:';
  var iframe = document.getElementById('iframe');
  
  placeStr += placeId;
  url += placeStr;
  iframe.src = url;

}

var onSubmitHandler = function(e) {
  e.preventDefault();
  //markLocation();
}

document.getElementById('form').addEventListener('submit', onSubmitHandler);

input {
  height: 2rem;
  border-radius: 2px;
  border-style: none;
  border: 1px solid #e2e2e2;
  padding-left: 1rem;
}

.places {
  height: 100px;
}

#map {
  height: 100%;
}

#location {
  width: 400px;
}

.map-frame {
  width: 100%;
  height: 500px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="places">
    <form id="form" autocomplete="off">
      <input id="location" type="text" placeholder="Enter a location">
    </form>
  </div>
  <div class="map-frame">
    
   <!--  Be sure to replace YOUR_API_KEY_HERE with your actual API key -->
    <iframe width="100%" id="iframe" height="100%"frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ-QB6d6K5lzMRxi-hKfTINm0&key=YOUR_API_KEY_HERE" allowfullscreen></iframe>
  </div>

  <!--  Be sure to replace YOUR_API_KEY_HERE with your actual API key -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places&callback=initPlaces" async defer></script>
</body>
</html>

An external jsbin link here as well if you want to try it out: jsbin

Here's the documentation of the Maps Embed API in case you want to pursue that track: https://developers.google.com/maps/documentation/embed/start

Hope that helps!

is it possble to mark 2 places at a time, using this technique,because i don't find the way for this.my requirement is that user will select 2 places from 100 places and then will redirect to new page , that will contain map and other data,so i will highlight those places selected on previous page in a single map. — Dragon, Sep 26 '17 at 17:18
Unfortunately, no. You'll need to check the duplicate link that xomena provided above and use the Maps Javascript API. — syciphj, Sep 27 '17 at 00:33

Highlight 2 places in a single map without using search box

1 Answers1