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
head section (or you can place it in the footer):
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:
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
- mapTypeControl: 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.
- zoomControl: 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.
- streetViewControl: This toggles the controls that enable street view.
- draggable: This toggles the ability to click and drag the map.
- scrollWheel: 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.
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:
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
- Easy and simple to use – plug it in and go
- Fast file transfers with SuperSpeed USB 3.0
- Compatible with USB 3.0 and USB 2.0
- Powered by USB port
- Drag and drop file saving for Windows, right out of the box.
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.
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:
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
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:
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.