How to highlite region of dropdown selected area on Google Map

Question

How to highlight dropdown selected area region on google map, but I want this through jQuery or javascript, My actuall requirement is like this dropdown is autocomplete address and which area or city when I select on dropdown, Google Map just highlite those area by my custom highlite color.

<select> 
   <option>Los angeles </option>
   <option>California</option>
   <option>New yourk</option>
</select>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423284.5905135276!2d-118.41173249999996!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2s!4v1442834158072" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Vadim Gremyachev · Accepted Answer · 2015-09-21T13:59:08.313

The following example demonstrates how to display location on user selection:

Example

 var locations = [
        { City: 'New York', Location: '!1m18!1m12!1m3!1d193578.74109040972!2d-73.97968099999999!3d40.703312749999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+Yhdysvallat!5e0!3m2!1sfi!2sfi!4v1442836316382' },
        { City: 'Los Angeles', Location: '!1m18!1m12!1m3!1d423284.5905135276!2d-118.41173249999996!3d34.020498899999986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2s!4v1442834158072' }
    ];

    var seloption = "";
    $.each(locations, function (i) {
        seloption += '<option value="' + locations[i].Location + '">' + locations[i].City + '</option>';
    });
    $('#optLocations').append(seloption);


    $('#optLocations').on('change', function () {
        var src = "https://www.google.com/maps/embed?pb=" + this.value;
        $('#embedMap').attr('src', src);

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="optLocations" >
        <option disabled selected> -- select a location -- </option>
</select>
<br/>
<iframe id="embedMap" width="600" src="about:blank" height="450" frameborder="0" style="border:0" allowfullscreen='true'></iframe>

Example 2

Using Google Maps Embed API

  var locations = [
        { City: 'New York' },
        { City: 'Los Angeles' },
        { City: 'Moscow' },
        { City: 'Paris' }
    ];

    var seloption = "";
    $.each(locations, function (i) {
        seloption += '<option value="' + locations[i].City + '">' + locations[i].City + '</option>';
    });
    $('#optLocations').append(seloption);


    $('#optLocations').on('change', function () {
        //the key is provided for demonstration purposes only! 
        var embedUrl = 'https://www.google.com/maps/embed/v1/place?key=AIzaSyB-MCwhB8ITpjZQyznpnJtPP0ca-62s-jw&q=' + this.value;
        $('#embedMap').attr('src', embedUrl);

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="optLocations" >
        <option disabled selected> -- select a location -- </option>
</select>
<br/>
<iframe id="embedMap" width="600" src="about:blank" height="450" frameborder="0" style="border:0" allowfullscreen='true'></iframe>

Please explain the code. Where do you get the `Location` value? — Triet Doan, Sep 21 '15 at 13:28
@AnhTriet, follow [Embed a map](https://support.google.com/maps/answer/3544418?hl=en) page — Vadim Gremyachev, Sep 21 '15 at 13:34
It means that if we have 100 locations, we have to do `Embed map` 100 times to get the location data? :( — Triet Doan, Sep 21 '15 at 13:38
That's great! Thanks a lot! :D For anyone who wants to know more about `Google Map Embed`, check this [link](https://developers.google.com/maps/documentation/embed/start). — Triet Doan, Sep 21 '15 at 14:05
Your both examples woks for me, Thnx for this. Can you give me some more help? how to I highlight selected region by my own color like blue or other my own define color except pink i.e default highlight color. — Dami, Sep 23 '15 at 05:55

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Currently, you cannot do it through Google Map API. Take a look at this post for more detail.

However, there is a workaround way mentioned in Vadim Gremyachev answer: using Google Map Embed.

If you want to highlight countries (not states), use Geo Charts service. Its documentation is here.

edited May 23 '17 at 12:14

Community

1
1

answered Sep 21 '15 at 13:33

Triet Doan

11,455
8
36
69

How to highlite region of dropdown selected area on Google Map

2 Answers2

Linked