Add Google Maps to website

Preface

Google Maps allows two ways of embedding map onto website: simple copy-paste method to embed the code kindly provided by Google and the usage of more complicated Google Maps API which supposes to implement js scripts for extra customisation of the map.

Start doing

First method is very simple. Go to Google Maps website, type in the Search input field address/location, click “link” icon (on the left sidebar) and get a code ready to be embedded onto your website. If, for example you have been searching and typed “Potsdamer Platz, Berlin, Germany” your code will look like this:

View Larger Map

And your map will look like this:

View Larger Map

Another method is to use Google Maps API which allows much more freedom in customisation of your map. As usual I include into my templates the js file entitled “googlemap.js”. Sometimes I place there bouncing marker, sometimes I colourise it, sometimes I add design to white container that opens when one clicks a marker and so on. On the screenshot below there is a green-ish map, colourised by adding a few values like hue, saturation etc into googlemap.js file.

However, using API requires first of all to define the location and add it to the js file and afterwards one may add various decorations and effects. First thing to do is to add div id “map_canvas” to the markup of html page. Second thing is to open googlemap.js file and insert the location coordinates. To find coordinates go to Google Maps website, type address/location in “search field” and get the map of your location. Click (right click) on red marker and in opened submenu click “What’s here?”. In the same “search field” where you have typed physical address you will find now the coordinates of your location which will look like this: “52.509404,13.37461”. Now go to googlemap.js file and find this line of code:

var map;
var city = new google.maps.LatLng(51.34021,12.372215);

Replace coordinates with your own.

For example on my “Red Goblin” template there are two types of coordinates: general area and venue address as well.

You will need to find in Google Maps website these two types of coordinates and place them onto js file:

var map;
var city = new google.maps.LatLng(52.801179,0.871782);

var companyPos = new google.maps.LatLng(52.679804,0.938486);

As you see, the coordinates are slightly different because first set of coordinates defines the location of a larger area around the venue while second set of coordinates defines the concrete address of given venue.

Sometimes I use custom icon for marker. You need to create your own marker in Photoshop (or use some ready icon, they are plenty on Internet) and replace mine with your own icon here:

var companyImage = new google.maps.MarkerImage('images/pin.png',
new google.maps.Size(19,30),

Note that (19,30) in the code above is the exact size in pixels of my icon. If your icon has other dimensions you will need to adjust the size accordingly.

One more thing to note is the map behaviour which you can adjust according your needs. As usual (in majority of cases) I leave these functions set to “true" (however, every function can be inverted to “false”–really depends on you–as an example, in the code below navigationControl is set to “false”):

center: city,
scrollwheel: true,
navigationControl: false,
mapTypeControl: true,
scaleControl: true,
draggable: true,
};

There are yet many things are possible with Google Maps API. You can visit their site in order to learn and apply various features available at your disposal.