Creating & customizing a Google Map

Here’s a map I created some time ago with JSON and co.:

53129 Bonn – This is where you’ll find me.

 

Maybe I’ll create a Google Maps Creator Tool some day but until then here’s how to do it yourself.

1. Setting up

  • Add the Google API Script to your Page (before the customizing script we’re about to create). For this project   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>  will do the trick.

Everything is set up. Now we can create a container in which the map will be loaded later on. We do this in HTML like so:

 

The #map_canvas is our container for the map while #placeDetails is a custom button. Add that html anywhere you want your map to appear.

If you’re not familiar with HTML go learn it, it’s vital (and super easy).

 2. Styling the Containers

We now style our map container. We give it a grey background so if something is not working we see at least that there should be something. We also style the placeDetails as we like. Here I placed it outside our .map container (which overflow is hidden) to hide it by -110%. Later on we will change this value when triggered to get the fly in effect. Lastly I hide the default Google Maps buttons I don’t want and add my own controls. Note that this was my last step after I successfully implemented the map. You can only find out the right elements to hide by inspecting the map and searching for those elements. I’ve only already included it here for the sake of simplicity. Take a look at the CSS Selectors if you don’t understand how to select the right stuff to hide in CSS.

3. Implementing & Styling the map

First we set up all the styles. I used the Styled Maps Wizzard to find out the right JSON code to add in the styles variable. Then we set the options we want. There are a hell lot of options to add feel free to customise it as you wish. Creating a marker is also straight forward. Choose at least the position, the title and the icon for good results. Of course there are more marker options than those 3. By default there are only two kind of animations: BOUNCE and DROP. Bounce will let your marker constantly bounce while drop plays just once. Just try every feature out.

With google.maps.event.addListener(marker, 'click', function(){})  you can bind an action to the last marker.

And that’s it. Now you have an awesome customised map!

4. Enhancing (optional)

Now this is only a very light map with only one marker. But you can create multiples markers as well. An easy way to do this would be to put the places into arrays and using jQuery .each() functionality to add as much markers as variables. Do it like so:

 

Happy Mappin’!

Leave a Reply