custom google map
June 18, 2014 | 102 Feedbacks

Custom Google Map

A custom google map to show company location on your website. It can be easily customised to perfectly fit your website style!
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

When it comes to location, Google map is a really powerful tool. It requires just a couple of minutes to create a new map!
Unfortunately  the style of the map doesn’t always fit properly the  website style.
This resource allows you to set a main colour for your map (plus a saturation and brightness level) an to add a custom map marker.
The default map controls have been replaced with custom zoom-in/zoom-out buttons.

Creating the structure

We created a section#cd-google-map to contain our google map, the custom #cd-zoom-in and #cd-zoom-out buttons and the address bar.

The #cd-zoom-in and #cd-zoom-out buttons will be appended to the map using jQuery (more in the Events handling section).

We inserted the link to the Google Map API before the body closing tag:

You have to replace {YOUR_API_KEY} with a real key number (here you can find out how to create an API key).

Adding style

We set width: 100%; to the section#cd-google-map (and to the div#google-container) so that the map covers the entire width of the viewport. We also added some basic style to the #cd-zoom-in/#cd-zoom-out buttons.
The style of the map has been set into the jQuery file.

One  thing to note: on mobile, we reduced the high of the map to  facilitate scrolling through the page (scrolling on the map just drags the map but doesn’t scroll the page).

Events handling

First of all, we defined our google map parameters:

We used a svg image as custom marker,  but added a png fallback for IE11.

To style our map, we defined a main color, a value of saturation and a value of brightness:

These 3 values determine the style of our custom map. I.e., to style the highways we set:

You can have a look at the complete list of the featureTypes on the Google developer’s guide.

Note: we set the scrollwheel option to false to disable scrollwheel zooming on the map.

As final touch, we appended to the map our custom #cd-zoom-in/#cd-zoom-out buttons (we defined the CustomZoomControl function to do that) and placed them on the top-left of the map:


June 18, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • KevinRajaram

    Brilliant! Thank you very for this!

  • Bruno Rodrigues

    Awesome =D

  • Jovie Brett Bardoles

    Sweeeeet! Thanks alot Cody cody house :D

  • Jorge Epuñan

    If you remove the $ from the variable declaration, you won’t need jQuery at all.

    • Claudia Romano

      Yes absolutely! We have been using this resource in other projects that actually require jQuery (and also left it for consistency with the other resources on Cody). But if you don’t need jQuery in your project, you can definitively get rid of it.

  • Amine Bouyarmane

    A little precision, when using a normal map, the Google maps API allows you to have 25.000 map requests per day. but when using styles you have a limit of 2500 map requests.

    • Claudia Romano

      Thanks for the heads-up.

  • David Grimes

    The best thing about this is the disabling of the map drag on mobile view. Too many sites forget to do that, and trap you on a map with no scrollable area. Awesome map!

  • Sérgio Santos

    Nice work, but why the use of the prefix $?
    Only variables that are used to store/cache jQuery objects should have a name prefixed with a $.

    • Max Bailey

      Good point, however it’s only convention. When I came from PHP that was my biggest problem, I always prefixed them with ‘$’. I’ve since kicked that habit though.

      • Sérgio Santos

        Of course it’s just a naming convention. But I don’t see any reason to use the prefix $ on vars that represent integers or floats, and further on using it again on a var that represents a string.

      • Sérgio Santos

        Nevertheless, nice work and thanks!

    • Claudia Romano

      You’re absolutely right. I’m gonna change that.

  • HTML5 Ninja


  • hansrodtang

    Remember that covering up the Google branding on a map such as this is against the Terms of Service for Google Maps. ( Section 8.4b viii, Section 10.1.1b and Section 10.1.1f ix)

    Otherwise a really cool demo, will be trying it out.

    • Claudia Romano

      Thanks for the heads-up. We didn’t notice the problem with the address bar. We are going to update the resource, changing the position of the address bar so that the google logo is perfectly visible and the Terms of Use links can be easily clicked.

  • Daniel Lo Nigro

    var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf(‘trident’) > -1;


    Please please *please* don’t do user agent sniffing. IE12 will most likely match this too but may not require the same modification. You should always be doing feature detection.

    • Claudia Romano

      Hi Daniel, unfortunately it’s not that IE11 does not support SVG (it does actually), but just that it seems not to show svg markers created with javascript (like the one with google map). If you think there’s a better solution, feel free to share. I’ll absolutely update the resource. Cheers!

  • YSEO


    I’m having issue with the Google API. Anyway, how do I authorize my site to use the Google Maps client ID? Am I missing something here?

    Anyway, this is really an awesome custom maps.


    • Claudia Romano

      Hi, when you create a new API, you have to insert the referers for your key. You have to set your site url (or at the beginning try with Any referer allowed) . To do that, go back to the Google APIs Console and check the API Access link. Hope this helps!

      • YSEO

        Thanks for the reply. Yes, I’m using “Any referer allowed” as I’m testing it on my local machine but I’m still getting this error message

        “The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site.”

        Kinda lost now… ;(

    • Scott Mise

      If I’m not mistaken the JS API v3 doesn’t require a key. I’m having success just using:

  • Lucas

    One off topic question hope I get the answer. I would like to know how do you create thumbnails in frontpage. Do you use Photoshop or do you generate them using serverside libraries ?

    They look perfect(all the same size) very crisp. Can you share how do you make them ? I love this site ! Thank you for the code snippets.

    • Sebastiano Guerriero

      Hey Lucas, I take screenshots of our demo pages, then bring them in Photoshop to play a bit with the result and set the correct size

  • Scott Mise

    Add a click listener to the location marker by adding google.maps.event.addListener(marker, ‘click’, function() { //do stuff }); to line 208 of main.js.

  • qmarcos

    There is a great tool from googlemaps team that helps a lot when customizating available styles, and you don’t need to remember the properties/names of them:

  • Noah

    Rendering problems on Chrome/Chromium (35.0.1916.153):

    1) Zoom buttons are just colored squares (no + or -).
    2) The location pin doesn’t show up.

    However, it does render just fine in Firefox.

    • Claudia Romano

      Hey Noah, thanks for the heads-up. I’m testing it on Chrome (35.0.1916.153 on Mac) and it works just fine (svg are correctly loaded and shown). I’m gonna look into it though. cheers!

      • Noah

        Turns out it was a problem with the ancient apache config on the dev machine I was testing with. It was setting the mime-type of the svg files to text/xml, instead of image/svg+xml. Firefox deals with this, but Chrome not so much.

  • Mu.Ah

    thanx so dam much for this tutorial ,its exactly what i was looking for ,just a couple of things i encounterd and here is how to fix incase someone else also got into any

    1-for the api key ,you dont need it in testing or incase of local server so use (api/js?sensor=false) and use the key later when you publish the site.

    2-dont forget to give height to the map container as 100% or none wont show the map.

    3-to make the map responsive , thanx to this post ( now the map resize exactly as i want it ,just scroll to the (//set google map options) in the main.js and add everything after this comment in the function initialize() {} then add the rest as the post say.

    *check this site for some variations about the coloring (

  • Cam

    Nice one. Almost looks as good a a Mapbox js map!

  • Mhaddy

    Beautiful map – but how do I allow the user to get directions to the marker? On a non-styled Google Map, clicking on the marker brings up an InfoWindow where a TO and FROM address can be entered. How do I enable this?


    • Claudia Romano

      Hi, glad you like it!
      In the main.js file, try to add the following code inside the CustomZoomControl function:

      (replace the url with the one of the map/directions you want to show).

      • Mhaddy

        That did it. Thank you!

  • Özgür EFE

    It may be helpful if you want to create your custom design with ease with possibility of generating unique map styles to fit with your design.

  • David Silva

    I’m having trouble getting the location marker to show up. Everything else works great though. Any thoughts on what I could check? This is still a local build.

    • Claudia Romano

      Hi David, are you sure you have loaded the marker images? Are you experiencing this bug on all browsers?

      • David Silva

        I forgot about this comment… I’m using it within WordPress and it wasn’t recognizing the relative link. I had to replace it with the full link for it to work properly.

  • necito nikko pentinio

    newbie here. how am i gonna put the info if i click the icon?

    • Claudia Romano

      Hi, check the reply to Mhaddy’s comment to open a window with additional info. That should help!

  • Morad

    I was searching for a use of the google map, and i found here the most suitable. Thanks!

    I have some issue, I’m trying to use another .svg & .png location indicator with 64px width & height, but it gives me the marker with 24px. I tried to use a different dimensions but it give me the same width! I don’t know what is the problem.

    Thanks again for this great work! :)

    • Claudia Romano

      Hi Morad, glad you found it useful! Are you sure you’re using a 64x64px icon (the Google map API should size the icon automatically). I tried replacing the icon with a bigger one and it worked fine.

      • Morad

        Thank you Claudia :)

        The problem was related to svg size as you said. I opened the svg file and i found 2 properties of width and height where i can change the size of it.

  • sgates

    Everything is great I’m just having some issues with changing colors. Why are the saturation and brightness needed? I would like to match an exact hex color and this seems to be throwing it off. I tried removing these variables yet it somehow still falls back to a desaturated state.

  • Krzysztof Polasik

    Hi Claudia! I love the library of your resources. Thank you very much for so many inspirational ideas! However, I am having difficulties trying to place one additional marker on the google map. Could you possibly help me? Regards,

    • Claudia Romano

      Hi Krzysztof, thanks! :)
      In the .js file, right after var marker = new google.maps.Marker({…….}); try adding:

      Of course you have to define newlatitude and newlongitude. That should work.

      • Krzysztof Polasik

        Hi Claudia! Thank you very much for your prompt response. Your solution did work for me.

  • luis

    Great post Claudia, I am using the Custom Map and it works great. One quick question I decided to make the main container display:none, that way when I click on my view map it shows it. Everything work great except the custom zoom in and out buttons after it slide toggles the map for a second time the whole section of the custom buttons disappears. I was wondering if you encounter this problem before ?

    best regards,

    • Claudia Romano

      Hi Luis, no I didn’t. Do you have a live version?

      • luis

        Yes here :
        just click in view map. I really don’t know why is not recalling the custom buttons,
        is just deleting them from the code

        • Claudia Romano

          The zoom in and out button are appended to the map when it is initialised. When you close the map (not sure what you do but it doesn’t seem to be only a display change), the map is kind of re-initialise but then it cannot find in the html the zoom-in and out button anymore. So you should not re-initialise your map (you could use a slideToggle to hide the map). Hope this helps.

          • luis

            Thank you for the prompt response.I guess this slideToggle would work if i put an initialize function for the costume map code that way the map is loaded when I press the view map (SlideToggle).
            what would be your suggestion to make an initialize function with the code that you already have in the tutorial ?
            Thank you very much for the fist suggestion

          • Claudia Romano

            The function

            initialise the map

  • Bryan

    Having the same problem as YSEO from six months ago. When loading the
    page I get this alert: “Google has disabled use of the Maps API for this
    application. The provided key is not a valid Google API Key, or it is
    not authorized for the Google Maps Javascript API v3 on this site. If
    you are the owner of this application, you can learn about obtaining a
    valid key here:

    I’ve inserted the referers for my key and tried “any referers”
    and generated a new key to no avail. The thing is, when I load your
    index.html file in my browser I get the same alert.

    • Bryan

      Ok, duh on the last line, but when I use the script without a key, as some have suggested, it throws the same error.

      • Claudia Romano

        Hi Bryan, if you’re trying to use it without a key, make sure to remove the ‘?key={YOUR_API_KEY}’ from the google script link in the html file.

    • Evan

      You don’t need to specify an API key in v3 of the google maps API, but you’ll have limitations on the number of requests per second/day.

  • manoj

    hi can you help me how can add own address in map like india

    • Claudia Romano

      In the main.js file you can set latitude and longitude of your location.

      • manoj

        thank you so much for your help

      • libin prasanth

        How to add info window on this map

  • Jason Oney

    Just wanted to say I placed this onto two websites in the last two days and I cannot thank you enough for all the hard work you put into this. It is superb. the clients like having “colorized’ maps that do not look generic!

    I sure hope you have plans on keeping this current, is that the case? Continued support?

    the install was easy and so was the integration. I had absolutely zero issues!

    • Sebastiano Guerriero

      Hi Jason, glad to hear that! We are doing our best to keep all resources updated. In case you find any bug, feel free to report it in the comment section ;)

  • Antonio

    I am looking to detect users coordinate with HTML5 GeoLocation and then load the map based on the coordinates. Once the map renders to your location it is supposed to drop pins for multiple locations marked on the map which should be stored in a CSV file. Is anyone down for a small side project to help me out here please?

  • Miguel G

    Hi… is it possible to use a CSS class to add a custom Marker, instead of using a Icon Image URL?

    Thanks :)

  • Adrianne K.

    Hi…Great tutorial and easy to follow files! Having a problem in the responsiveness. For smartphone and ipad (portrait mode), the map breaks up into columns and shows the background color. I know it is on my end and I tried the suggestion below from Mu.Ah. Maybe someone can help?

    Here is the url of the site:

    • Ashley Tonkin

      I’ve had a look at your website, have you added/removed any of the code from the downloaded code you got from the here ? If so would you be able to show me what you have removed.

      • Adrianne K.

        Hi Ashley,
        Sorry for delay. Thank you for your response. I did a copy/paste into my CSS file – somehow messed up the #cd-zoom-in and #cd-zoom-out. It is fixed now. Thanks again.

  • Mariano Franzese

    Great, thank you!

    I have a question…
    I can decentralize the map to bring up the icon’s position on one side?

    • Claudia Romano

      Hi Mariano,
      in our code we have been using the same latitude /longitude for the map center and the marker, but you can set 2 different couples of values (in the main.js, on line 189 you have the map center coordinates, while on line 203, the marker coordinates).

  • Mohsen

    Great job as always.
    I have one question. I it possible to add multiple markers on the map?

    • Claudia Romano

      Hi, thanks! :)
      Yes, you can add additional markers using the google.maps.Marker constructor.

  • Attilio Genovese

    Thank you so much!!

  • Keiron Lowe

    I recently came across the issue with SVG markers in IE, but instead of using a PNG fallback, I used SVG path notation as described in this stack overflow post.

    • Claudia Romano

      Hi Keiron! Thanks for sharing this. I’ll use it to update the resource! ;) Cheers

  • Sonal

    I’ve used your map for a new site i’m working on and it looks great! My only issue is that in Firefox the zoom controls don’t work and the marker doesn’t appear. You can view the site here:

    I’ve tried a few things but I can’t seem to pinpoint the cause.


  • Eduardo Arroyo

    Hi Cluadia, I’m new in developing web, I found your guide excellent, but I have some problems, I Hope you can help me or anyone here,

    In order to use the api, do I have to purchase some google product? please help me

    • Claudia Romano

      Hi Eduardo,you don’t!

      • Eduardo Arroyo

        I downloaded your demo and everytime I try to use it finding how it works it appears this

  • Ajmla khan

    Can i add this code in Adobe Muse?

  • Ravi Rai

    Great Work Thanks

  • WebHostingMedia

    Love this plugin! Will definitely include it in one of my upcoming projects. Thanks you!

  • Steven

    Hi Claudia, I would like to ask what you think of the idea of an interactive google maps timeline? I’m new to web development but would like to create this myself and was wondering if you could offer any advice to go about it?

  • Dave M

    This is great, how do I add the bubble when you click on the marker, that will bring up address, telephone number etc?

  • Rakesh Prajapati

    Awesome :)
    Same question from mine which Dave M raised.

    • Claudia Romano

      Hi @Rakesh Prajapati and @Dave M, you should try adding an event listener for the map marker to show the info window. This article should help:


      • Niko V

        Hi, I’ve managed to add this info window for the first marker which is set at the beginning of your code, how could I add another info window for other markers?

  • Влада Иванова

    Thanks by great material!

  • Robert Turner

    Thanks for the blog.Custom google maps are very useful.

    map builder

  • Mobelti

    hi , awesome , thanks

    I have a question

    i want to do fullscreen by using this script , how can i do that ?

    thanks in advance for your support

    • Claudia Romano

      Hi there, try setting in the style.css file:

      That should do it!

    • Mobelti

      perfect , i thank you very kind your support

  • Viacheslav Marchkov

    Nice job! Thank you a lot!

  • Sahil Taneja

    Awesome work!

  • Андрей Григорян


  • zencoder

    thank you very much – helped to deal with the Google Maps settings!

  • zencoder

    but I have one question – maybe I’m wrong, but your map is not responsive – ?

  • zencoder
  • abr4xas

    Hi Claudia,

    i’m trying to use this plugin with bootstrap column but have a little problem. The map doesn’t center inside the div tag.

    This is my syntax:

    The first image below is what i get when refresh the page. The second is the way it should look.

  • Robert Lamina

    Hi Claudia,

    how can i add more custom controls.

  • Ramandeep Singh

    Hi Claudia,

    Awesome work! Just a quick question how to change the pink to any other colour? – Thanks :)

  • Darrian Kendall

    Good afternoon. I tried putting in the information, including my key and lat/lon information, and am getting an OOPS…