#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,671
    Rep Power
    171

    How can I style google map's pop up window?


    Hello;

    How can I style google map's pop up window?

    For example here in this page. If you click on show map, and then click on an icon you see the pop up window. But the border and the frame seem to be unchangeable! What can I do?

    Please advice thank you.
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    what do you mean with they seem to be unchangeable. They just used a wrapper div (around the iframe) and styled it with css (inline though). nothing fancy going on there
    Last edited by aeternus; February 22nd, 2013 at 09:21 AM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2014
    Posts
    1
    Rep Power
    0

    A bit of styling


    I was able to remove the overflow bars by including this in my css:

    .gm-style-iw div{

    overflow: hidden;
    }


    This appears to target the div which resides just inside the gm-style-iw class in the map.




    Originally Posted by English Breakfast Tea
    Hello;

    How can I style google map's pop up window?

    For example here in this page. If you click on show map, and then click on an icon you see the pop up window. But the border and the frame seem to be unchangeable! What can I do?

    Please advice thank you.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2014
    Posts
    28
    Rep Power
    0
    Originally Posted by English Breakfast Tea
    Hello;

    How can I style google map's pop up window?

    For example here in this page. If you click on show map, and then click on an icon you see the pop up window. But the border and the frame seem to be unchangeable! What can I do?

    Please advice thank you.
    You can style you own maps like this is done -

    var styles = [
    {
    featureType: 'water',
    elementType: 'geometry.fill',
    stylers: [
    { color: '#adc9b8' }
    ]
    },{
    featureType: 'landscape.natural',
    elementType: 'all',
    stylers: [
    { hue: '#809f80' },
    { lightness: -35 }
    ]
    }
    ];

    So as per you need try figure out in the Devlopers document and style you own.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2014
    Posts
    28
    Rep Power
    0
    Originally Posted by English Breakfast Tea
    Hello;

    How can I style google map's pop up window?

    For example here in this page. If you click on show map, and then click on an icon you see the pop up window. But the border and the frame seem to be unchangeable! What can I do?

    Please advice thank you.
    You can style you own maps like this is done -

    var styles = [
    {
    featureType: 'water',
    elementType: 'geometry.fill',
    stylers: [
    { color: '#adc9b8' }
    ]
    },{
    featureType: 'landscape.natural',
    elementType: 'all',
    stylers: [
    { hue: '#809f80' },
    { lightness: -35 }
    ]
    }
    ];

    So as per you need try figure out in the Devlopers document and style you own.

IMN logo majestic logo threadwatch logo seochat tools logo