Google map allows you to quickly and easily add a map to your website. Your map can then contain multiple pin points each containing information such as the locations address, hours of operation, and contact information. There are several ways you can place a map on your website. The first being an iFrame. This method is a little less flexible but quick to set up. The second method is by using the google maps API.
Iframe google map
To add a map to your web page using the iFrame method start by going to maps.google.com. Search the address you are looking for. Once the pin point appears in the correct location click the chain or link button bellow the search bar. Copy the iframe code and past it into any html file or website CMS WYSIWYG.
Google maps API
The google maps API allows you to customize your map by adding custom markers, custom info box content, creating click events, setting the map style and more.
First we need to add a javascript library to the head of your html document. You will need to obtain a google maps api key by going to developers.google.com.
<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY-HERE&sensor=true”></script>
Now we are free to use the API.
HTML
We need to set up a div. Give it a width and height and an ID of map_canvas.
<div id=”map_canvas” style=”width:100%; height:100%”></div>
We will also need to run a function once the page loads to initialize the map. Add an onload function to your body tag
<body onload=”initialize(); “>
Javascript
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“map_canvas”),
mapOptions);
}
