How to style only the portion of google map

[newcoder1010]

Hello, 

I have a google map field. I would like to highlight the city (eg. background: gray;) of the map. I inspected the page in chrome and tried but could not figure it out. If you could help, it would be great.

Image

 My page link. 

HTML:

<div class="entity entity-field-collection-item field-collection-item-field-mapwcaption clearfix" about="/field-collection/field-mapwcaption/3" typeof="">
  <div class="content">
    <div class="field field-name-field-map1 field-type-text field-label-hidden">
    <div class="field-items"><div class="field-item even">
    <iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?hl=en&q=Baltimore%2C+MD&z=14&t=m&output=embed"></iframe>
</div>
</div>
</div>
<div class="field field-name-field-map-caption field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">We Buy House MD</div></div></div>  </div>
</div>

 

[dsonesuk]

By default it shows the highlight of city, state/county depending on search and zoom used, you also could use google maps api to create polygon to do the same thing.

[newcoder1010]

Yes, it does highlight the city. In addition, I am trying to have a background color to the city.

[dsonesuk]

Use google maps api, it won't be easy,

[mgason]

It is not just a bit of simple CSS for a Google Map as the map is being delivered by Google.

Some of this information might help...

google docs an map styling https://developers.google.com/maps/documentation/javascript/styling

cool free styles, might also help you understand how it works https://snazzymaps.com/

google interactive map styler, not tried this but looks interesting https://mapstyle.withgoogle.com/