Show specific countries name on map

Question

I am creating project using JavaScript. In my project I have integrated google map.My requirement is i want to show only some specific countries like:

India 
USA
Australia

Currently I am hiding all countries using:

var emptyStyles = 
        [
            {
            featureType: "all",
            elementType: "labels",
            stylers: [ { visibility: "off" } ]
            }
        ];
        map.setOptions({styles: emptyStyles});

I have created plunker:

https://plnkr.co/edit/ZQIFZelNROkZcnFZ6mgB?p=preview

That looks good, so what is your specific problem ? What have you tried to solve it ? — Martin Verjans, Jun 24 '16 at 11:58

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

I found an example where specific cities were displayed on the map. The idea is to

hide all the labels(like you already did)
create a json array of the place that you want to show labels for
Iterate through the json array and mark the labels.

You can find the code here: Display labels only to specific cities in Google Maps

Make following changes to the array:

var citiesJSON = {
geonames: [{
  lat: 20.5937,
  lng: 78.9629,
  name: "India"
}, {
  lat: 37.0902,
  lng: -95.7129,
  name: "USA"
}, {
  lat: -25.2744,
  lng: 133.7751,
  name: "Australia"
}]
};

edited May 23 '17 at 10:29

Community

1
1

answered Jun 24 '16 at 11:24

Avantika Saini

792
4
9

what problem are you facing? – Avantika Saini Jun 24 '16 at 11:37
I want to show only some countries name on google map. In the example am not seeing any name – angular Jun 24 '16 at 11:38
yes that i understand. The code in this link is for displaying selected cities. instead of cities you can show countries. The only change in the code given on this link would be to change the json array. Store the names and location of all the countries that you want to display in that array. I think it should work – Avantika Saini Jun 24 '16 at 11:41
can you create me plunker for this @Avantika Saini – angular Jun 24 '16 at 11:44
I have edited my answer. You literally have all the code now. I am sorry but you have to put in some effort of your own as well – Avantika Saini Jun 24 '16 at 11:52
@ Avantika saini:http://stackoverflow.com/questions/37171426/google-maps-api-v3-infobox-js-removed – angular Jun 24 '16 at 11:59
@Avantka saini: correct api is https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js – angular Jun 24 '16 at 12:03
@ Avantika Thanks for Answer – angular Jun 24 '16 at 12:03

Show specific countries name on map

1 Answers1