Update: Google now requires you to provide billing information to use the Google Maps API

Adding a map to your website is easy enough with Google Maps. You simply type in the address you want to show, click “Share” and “Embed Map” and you have yourself an iframe that you can paste into your code that’ll show a nice map for you. But what if you want a custom map to fit the style of your website? What if you’d like to use a custom icon for your map marker? Or how changing the colors of the map elements (like roads)? You can do all this and much more by using Google Maps API.

Creating a Custom Map

The Google Maps API runs on Javascript, so before you do anything else, you’ll need to include the JS file in order for it to work properly. Paste the following into the head section (or you can place it in the footer):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Next, your map will consist of several individual parts. First thing you need to do is initialize your map and define your options. The options will define what type of map you are using, whether various controls will be on or off, where the center of the map will be, etc. It will look something like this:

var map; function initialize() { var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, zoom: 14, zoomControl: true, panControl: true, streetViewControl: true, draggable: false, scrollwheel: false, center: new google.maps.LatLng(29.831818, -95.40617800000001) }; map = new google.maps.Map(document.getElementById('map'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize);

Some of these options are self-explanatory, but here’s a list of what each of these options mean.

mapTypeId : This is the type of map being used. It can be roadmap, satellite, terrain or a hybrid

: This is the type of map being used. It can be roadmap, satellite, terrain or a hybrid mapTypeControl : This toggles the controls to change map types (those mentioned above).

: This toggles the controls to change map types (those mentioned above). zoom : The determines how zoomed in the map is. The larger the number, the further zoomed in the map is.

: The determines how zoomed in the map is. The larger the number, the further zoomed in the map is. zoomControl : This toggles the controls for manually zooming the map in and out.

: This toggles the controls for manually zooming the map in and out. panControl : This toggles the controls for panning from side to side and top to bottom.

: This toggles the controls for panning from side to side and top to bottom. streetViewControl : This toggles the controls that enable street view.

: This toggles the controls that enable street view. draggable : This toggles the ability to click and drag the map.

: This toggles the ability to click and drag the map. scrollWheel : This toggles the ability to zoom in and out by scrolling your mouse.

: This toggles the ability to zoom in and out by scrolling your mouse. center: This is the latitude and longitude that will serve as the center of your map. Typically, these are the coordinates of the location you are adding to the map. On this map, I’ll include the location of my favorite taco shop.

The next two lines take your options and applies them to an element with an id of map (this can be changed) and initializes your map function.

Adding an Info Window

An info window can be a handy tool to show additional information about your location. The info window is the white bubble that pops up when you click on a map marker. It’s very simple to add one and customize what goes inside of it. Include this right after the map options you placed earlier.

var infoContent = '<div class="window-content"><h4>Torchy’s Tacos</h4><p>350 W 19th St<br />Houston, TX 77008</p></div>'; var infowindow = new google.maps.InfoWindow({content: infoContent});

The HTML assigned to the infowindow variable can be changed to whatever you’d like to have inside your info window. These can be styled with CSS.

Giving Our Map a Little Style

Like I mentioned at the beginning of this post, the whole point of using the Google Maps API is to take advantage of the ability to fully customize your map. That includes being able to change the colors of just about everything. For this tutorial, we will change the color of the streets from the default orange color, to a bluish color to more closely align with the style of this website. You can also change the color of the landscape, water, points of interest, transit, etc. To change the color of the streets, include the following:

var mapStyles = [{ "featureType": "road", "stylers": [ { "visibility": "on" }, { "hue": "#0099ff" }, { "saturation": -32 }, { "lightness": -7 }, { "gamma": 1.23 } ] }]; map.setOptions({styles: mapStyles});

The featureType selector allows you to specify what element of the map you want to customize. Then, you use stylers to set a hexcode for the street color and to adjust saturation, lightness and gamma values.

Dropping in a Map Marker

If you wanted to, you could create a map without a marker, although I’m sure why you’d want to. The marker helps to point out what you should be looking at on the map, and will trigger the info window you added above when clicked.

var marker = new google.maps.Marker({ position: new google.maps.LatLng(29.831818, -95.40617800000001), map: map, title: 'marker' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });

The position is the latitude and longitude of where your map marker will be located. The event listener is what adds the click functionality that triggers your info window.

The code above will simply insert the default Google map marker. However, since you can customize just about anything on this map, the marker is no exception. To swap out the default for something a little snazzier (can’t believe I just used that word), you can add this right before the marker code:

var icon = { path: 'M16.5,51s-16.5-25.119-16.5-34.327c0-9.2082,7.3873-16.673,16.5-16.673,9.113,0,16.5,7.4648,16.5,16.673,0,9.208-16.5,34.327-16.5,34.327zm0-27.462c3.7523,0,6.7941-3.0737,6.7941-6.8654,0-3.7916-3.0418-6.8654-6.7941-6.8654s-6.7941,3.0737-6.7941,6.8654c0,3.7916,3.0418,6.8654,6.7941,6.8654z', anchor: new google.maps.Point(16.5, 51), fillColor: '#FF7700', fillOpacity: 1, strokeWeight: 0, scale: 1 };

The path is where you add in your custom icon for the map marker. The example above is using SVG XML code to generate a vector icon, but you could use the path to an image instead (in which case, you wouldn’t need the anchor, fillColor, etc.). You’ll also need to add icon: icon, right after map: map, in the marker portion from above.

That’s it! You have all the pieces you need to generate your custom map. You will want to add a little CSS to the div that you have assigned the map id to, but just a width and height should do. Here is what your final function will look like:

var map; function initialize() { var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, zoom: 14, zoomControl: true, panControl: true, streetViewControl: true, draggable: false, scrollwheel: false, center: new google.maps.LatLng(29.831818, -95.40617800000001) }; map = new google.maps.Map(document.getElementById('map'), mapOptions); var mapStyles = [{ "featureType": "road", "stylers": [ { "visibility": "on" }, { "hue": "#0099ff" }, { "saturation": -32 }, { "lightness": -7 }, { "gamma": 1.23 } ] }]; map.setOptions({styles: mapStyles}); var infoContent = '<div class="window-content"><h4>Torchy’s Tacos</h4><p>350 W 19th St<br />Houston, TX 77008</p></div>'; var infowindow = new google.maps.InfoWindow({ content: infoContent }); var icon = { path: 'M16.5,51s-16.5-25.119-16.5-34.327c0-9.2082,7.3873-16.673,16.5-16.673,9.113,0,16.5,7.4648,16.5,16.673,0,9.208-16.5,34.327-16.5,34.327zm0-27.462c3.7523,0,6.7941-3.0737,6.7941-6.8654,0-3.7916-3.0418-6.8654-6.7941-6.8654s-6.7941,3.0737-6.7941,6.8654c0,3.7916,3.0418,6.8654,6.7941,6.8654z', anchor: new google.maps.Point(16.5, 51), fillColor: '#FF7700', fillOpacity: 1, strokeWeight: 0, scale: 1 }; var marker = new google.maps.Marker({ position: new google.maps.LatLng(29.831818, -95.40617800000001), map: map, icon: icon, title: 'marker' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize);

And this function outputs this lovely map:

Have any other cool tips on using the Google Maps API? Let me know in the comments below.