www.webdeveloper.com
Results 1 to 4 of 4

Thread: Customize Zoom Control for Gmap v3

  1. #1
    Join Date
    Dec 2008
    Posts
    138

    Customize Zoom Control for Gmap v3

    I am trying to make the Google API v3 map zoom control to look the same in desktop and iPad/iPhone. I want to use an image that I have created to replace the default 1. I found the below css solution but it is not working for me. The below css is in a separate css file. I have tried to disable the default zoom control but my custom image is not showing. Something else I need to do to make the custom image show?


    HTML Code:
    #map-container .gm-style > .gmnoprint > .gmnoprint { background:url(images/gmapcontrol.png) no-repeat center center !important; width: 38px !important; height: 60px !important; }
    #map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; }
    #map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; }
    #map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

  2. #2
    Join Date
    Nov 2010
    Posts
    1,102
    not 100% sure that I understand the problem, but you know that you can remove the zoom control by specifying
    Code:
    zoomControl: false
    in the map options

    for adding custom controls see here: https://developers.google.com/maps/d...CustomControls

  3. #3
    Join Date
    Dec 2008
    Posts
    138
    yes I know that as I have stated in my frist post "I have tried to disable the default zoom control" by changing it to false. I wanted to create my own zoom buttons. Found the css from another site but not sure how to get it to work.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,102
    I guess I was thinking there was a difference between "I have tried to disable the default zoom control" and "I have disabled the default zoom control".

    Sorry.

    The CSS won't do you much good without an element that it refers to and an element won't do much good without it being appended to the map. Hard to say what the problem is at this point without seeing some of your actual code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles