Support » Plugin: WP Google Maps » Custom Map with different colors and zoom buttons

  • Resolved Rhand

    (@rhand)


    Can you create a map like here https://goo.gl/bjiyEX with your plugin? As you can see it has its own main color, marker, zoom buttons, hides most labels like the ones for highways, local road, points of interest and so on.

    Two, where can I locate the translation files? I can get the Thai translation done for you.

    • This topic was modified 3 years, 3 months ago by Rhand.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi Rhand,

    You most certainly can do this with creating a custom theme template.

    To do so you may go to ‘Maps’ > select your map you would like to change > ‘Themes Tab’ and there are a couple of predefined themes that comes bundled with WP Google Maps I believe.

    You are also able to change the marker by editing your map, you will see ‘upload marker image option’.

    You are able to move most buttons and other elements on the map but it is a bit restrictive since these elements are loaded from the Google Maps API itself – it would be awesome if it supported custom classes for each element in the map (hopefully Google will allow this but I doubt it).

    I have created some custom CSS for you that helps style the map, as best as I could. You may paste this in your theme’s style.css or ‘Maps’ > ‘Settings’ > ‘Advanced tab’ (there is a custom CSS textarea for custom CSS) or a custom CSS plugin.

    .gm-style-mtc{
        display:none !important;
    }
    
    img[src^="http://maps.gstatic.com/mapfiles/api-3/images/google4.png"] {
      display:none !important;
    }
    
    .gmnoprint .gm-style-cc{
        display: none !important;
    }
    
    .gm-svpc{
        display:none !important;
    }
    
    div[title^="Zoom in"],div[title^="Zoom out"]{
       background-color:black;
    }

    You should be able to find the translation files for WP Google Maps here -> https://translate.wordpress.org/projects/wp-plugins/wp-google-maps

    When you’re done with the translation send it over to their support team -> http://www.wpgmaps.com/contact-us/

    I hope this helps! 🙂

    PS – I did the code in my local environment for my map and it removed some elements from within the Google Maps 🙂

    Huge thanks for the css tips. I couldn’t find those elements w/ my web inspector until I dug deeper for the “Zoom in” titled div after I read your post. Tricky syntax to target a div that way but great results.

    I dug a little deeper to find that you can’t change the color of the Zoom In/Out + and – signs because they’re a .png file and not font or icons. I tried replacing the content of the image w/ css but found that with filters, you can play around with it and effectively change the color.

    Thanks to css-tricks code pen examples, I used the following css filters to change the colors:

    img[src^=”http://maps.gstatic.com/mapfiles/api-3/images/tmapctrl.png”%5D {
    -webkit-filter: sepia(1) hue-rotate(40deg) saturate(4);
    filter: sepia(1) hue-rotate(40deg) saturate(4);
    }

    Since the image is black and white, I changed it to Sepia first, then rotated the hue and increased saturation. Filters just stack one after the other so that seemed to work – i’m seeing it live after implementing it on Firefox, Chrome and Safari. I changed it to a desaturated green-ish color.

    I played around w/ it here on code pen: http://codepen.io/grayghostvisuals/pen/fleuo

    HTML:

    CSS: img { display: block; width: 50%; }

    img {
    -webkit-filter: sepia(1) hue-rotate(40deg) saturate(4);
    filter: sepia(1) hue-rotate(40deg) saturate(4);
    }

    To change the color of the “little yellow guy” :

    img[src^=”http://maps.gstatic.com/mapfiles/api-3/images/cb_scout5.png”%5D {

    -webkit-filter: hue-rotate(50deg) brightness(55%) opacity(0.6);
    filter: hue-rotate(50deg) brightness(55%) opacity(0.6);
    }

    Change the filters as desired… again this resulted in a desaturated green-ish color.

    A little bit of a rabbit hole….. but fun.

    Thanks again!

    Hi @davidsteindesign

    Thank you so much for posting your solution here. We really appreciate it.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom Map with different colors and zoom buttons’ is closed to new replies.