How to show only states name into google map?

Question

I have customized google map according to my need now i have to show states name into my maps not able to achieve this.

var locations = [];

// console.log(data[0]);
for(var i= 0; i< data.length; i++) {
    console.log(data[i].camp_location);
    locations.push([data[i].camp_location,data[i].lat,data[i].lng]);
}
var map = new google.maps.Map(document.getElementById('map1'), {
    zoom: 5, // The initial zoom level when your map loads (0-20)
    minZoom: 3, // Minimum zoom level allowed (0-20)
    maxZoom: 17, // Maximum soom level allowed (0-20)
    zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
    zoomControlOptions: {
        style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
    },
    styles: [{"featureType": "water","elementType": "geometry","stylers": [{"color": "#2599F3"} ]},
            {"featureType": "landscape","elementType": "geometry","stylers": [{"color": "#429af7"} ]},
            {"featureType": "road","elementType": "geometry","stylers": [{"color": "#29768a",},{"visibility":"off"},{"lightness": -37}]}, 
            {"featureType": "poi","elementType": "geometry","stylers": [{"color": "#406d80"},{"visibility":"off"},]}, 
            {"featureType": "transit","elementType": "geometry","stylers": [{"color": "#406d80"},{"visibility": "off"},]}, 
            {"elementType": "labels.text.stroke","stylers": [{"visibility": "off"},{"color": "#3e606f"}, { "weight": 2},{"gamma": 0.84} ]},
            {"elementType": "labels.text.fill","stylers": [{"color": "#ffffff"},{"visibility":"off"},]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'},{"visibility":"off"}]},
            {"featureType": "administrative","elementType": "geometry","stylers": [ {"weight": 0.6}, { "color": "#1a3541"},]},
            {"elementType": "labels.icon","stylers": [ {"visibility": "off" } ] }, 
            {"featureType": "poi.park","elementType": "geometry","stylers": [{"color": "#2c5a71"}]}],
    center: new google.maps.LatLng(40.12165,  -101.862376), // Centre the Map to our coordinates variable
    mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
    scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)

    // All of the below are set to true by default, so simply remove if set to true:
    panControl:false, // Set to false to disable
    mapTypeControl:false, // Disable Map/Satellite switch
    scaleControl:false, // Set to false to hide scale
    streetViewControl:false, // Set to disable to hide street view
    overviewMapControl:false, // Set to false to remove overview control
    rotateControl:false // Set to false to disable rotate control,
});

// var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
    var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
        content:locations[i][0] // HTML contents of the InfoWindow
    });
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: urlpath+'assets/image/location-pin.png',
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
        }
    })(marker, i));
}

below is map link where i am showing locations and now i need to show states name into map. please help.

Answer 1

According to the documentation , the state ("province") names are available to be styled as featureType: "administrative.province"

Add this to your styling to style the state names as black text:

{
  "featureType": "administrative.province",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#000000"
  }, {
    "weight": 1
  }]
}, {
  "featureType": "administrative.province",
  "elementType": "labels.text.fill",
  "stylers": [{
    "color": "#000000"
  }, {
    "visibility": "on"
  }, ]
}, {
  featureType: "administrative.province",
  elementType: 'labels.text.fill',
  stylers: [{
    color: '#000000'
  }, {
    "visibility": "on"
  }]
}

proof of concept fiddle

code snippet:

 var map; var data = []; function initMap() { var locations = []; // console.log(data[0]); for (var i = 0; i < data.length; i++) { console.log(data[i].camp_location); locations.push([data[i].camp_location, data[i].lat, data[i].lng]); } var map = new google.maps.Map(document.getElementById('map1'), { zoom: 5, // The initial zoom level when your map loads (0-20) minZoom: 3, // Minimum zoom level allowed (0-20) maxZoom: 17, // Maximum soom level allowed (0-20) zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls. zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons. }, styles: styles, center: new google.maps.LatLng(40.12165, -101.862376), // Centre the Map to our coordinates variable mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!) // All of the below are set to true by default, so simply remove if set to true: panControl: false, // Set to false to disable mapTypeControl: false, // Disable Map/Satellite switch scaleControl: false, // Set to false to hide scale streetViewControl: false, // Set to disable to hide street view overviewMapControl: false, // Set to false to remove overview control rotateControl: false // Set to false to disable rotate control, }); // var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow content: locations[i][0] // HTML contents of the InfoWindow }); marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: urlpath + 'assets/image/location-pin.png', }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } } var styles = [{ "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#2599F3" }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#429af7" }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "color": "#29768a", }, { "visibility": "off" }, { "lightness": -37 }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#406d80" }, { "visibility": "off" }, ] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#406d80" }, { "visibility": "off" }, ] }, { "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }, { "color": "#3e606f" }, { "weight": 2 }, { "gamma": 0.84 }] }, { "elementType": "labels.text.fill", "stylers": [{ "color": "#ffffff" }, { "visibility": "off" }, ] }, { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }, { "visibility": "off" }] }, { "featureType": "administrative", "elementType": "geometry", "stylers": [{ "weight": 0.6 }, { "color": "#1a3541" }, ] }, { "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#2c5a71" }] }, { "featureType": "administrative.province", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#000000" }, { "weight": 1 }] }, { "featureType": "administrative.province", "elementType": "labels.text.fill", "stylers": [{ "color": "#000000" }, { "visibility": "on" }, ] }, { featureType: "administrative.province", elementType: 'labels.text.fill', stylers: [{ color: '#000000' }, { "visibility": "on" }] }];

 html, body, #map1 { height: 100%; margin: 0; padding: 0; }

 <div id="map1"></div> <!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>