Adding a simple google map to your website

Introduction

In this article I will show you how to use Google Javascript API to create a simple Map on you website and show exactly where you are.

I will cover following areas in Google Maps;

  1. How to initialize Google Maps API
  2. How to create the center of the MAP
  3. How to Zoom the Map
  4. How to choose Map types
  5. How to create a Map marker
  6. Finally how to disable Map Controls

Let's start using Google Maps Javascript API on your web page.

Basic Structure

It is a very simple task to show where you are in a google map in modern web sites and mobile apps. I will show you how to create a simple Google Map and how to mark where you are.

Let’s create a simple bootstrap 4 web page. I’m not going to talk about bootstrap 4 features in this article.

Bootstrap 4 Basic Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
<title>How to Create a Simple Google Map</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  </head>
  <body>
	<section>
	<div class="container ">
	<div class="col-sm-12">
	<h1 class="text-center">A Simple Google Map</h1>
	</div>
	</div>
	</section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<!-- Tether for Bootstrap --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
	
  </body>
</html>

You can find this template here

Initializing the Map

In order to create a google Map, first you need to add the Google Map API Javascript reference link into your web page. You can place it just below the bootstrap.min.js.

<script src="http://maps.googleapis.com/maps/api/js"></script>

After adding above reference code, add the following html code to your web page.

<!---Full stretched google Map---->
<div class="container-fluid no-padding">
    <!--Note: without proper height and width Map will not display--->
    <div id="googleMap" style="width:100%;height:380px;">
    </div>
</div>

NOTE: Before you go any further make sure to specify the height property of the map container Div. In this case it is (<div id="googleMap" style="width:100%;height:380px;"></div>).

This is really important, without height google map will not display. You will not encounter any errors either.

Add the following script just below the Google Map Api reference. This code snippet will create a simple google map on your web page. It will be a full stretched map across the page. You can control it by setting width and height of the container div.

<script type="text/javascript">
   var map; var mapProp;
   function initialize() {
     //map properties
     mapProp = {
        center: new google.maps.LatLng(51.508742, -0.120850),
	zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
            };
     //creating the map
     map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

How to create the center of Map

When you are creating a google map it’s a mandatory property to set the center of the map. It is a best practice to set the center with the country where you live in. Assume you are in England and live in London. Then set the longitude and latitude value of London as the center. You can use this link http://www.latlong.net/ to find your location coordinates. To create the center you can use the google maps LatLng function and use the longitude and latitude values as parameters.

How to zoom the Map

Zoom is another mandatory property of the map. Without it map will not show up. You can find more details of zooming with this vist the Google API site

Map Types

You can provide a Google Map type to show location eg. RoadMap style. There are several map types offered by Google Maps. You can find more map types in the official website. In this simple Google Map, I’m using the type “ROADMAP”.

Once map properties are ready, we can use the google maps Map function to create the map on the container div. Map function accepts container div element as an object and the map properties.

At this stage your map will look like as follows;

Add a Map marker

Google MAP Api provides many features to manipulate maps. One in particular is map marking. You may have seen various map marks like in the image;

You can add your own map mark as follows. Inside the initialize function after creating the Google Map using the given map properties, you can create your map markings. For this Google Map API gives a method call “google.map.Marker” Map marker

You can use the below mentioned code snippet to create a google Map Marker;

//create a map mark
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.508742, -0.120850),
    map: map,
    title: 'Hello England!'
}); 

How to disable the controls

There is one final touch up to be done to the hiding map controls shown in the map image below.

You can remove map controls by adding an extra property to map properties. Use the “disableDefaultUI” and set it to True as show in the code mentioned below.

//map properties
mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
				zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
				disableDefaultUI:true
          };

You can find the complete coding as follows;

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
<title>How to Create a Simple Google Map</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  </head>
  <body>
	<section>
		<div class="container ">
			<div class="col-sm-12">
				<h1 class="text-center">A Simple Google Map</h1>
			</div>
		</div>
	</section>
	<!---Full stretched google Map---->
    <div class="container-fluid no-padding">
    <!--Note: without proper height and width Map will not display--->
        <div id="googleMap" style="height:380px;"></div>
    </div>
   <div class="container">
   <h3>This Map uses Google Map Api 3</h3>
   </div>
	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap --> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
	<script src="http://maps.googleapis.com/maps/api/js"></script>
	<script type="text/javascript">
	 var map; var mapProp;
        function initialize() {
            //map properties
            mapProp = {
                center: new google.maps.LatLng(51.508742, -0.120850),
				zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
				disableDefaultUI:true
            };
			//creating the map
            map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
			//create a map mark
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(51.508742, -0.120850),
				map: map,
				title: 'Hello England!'
			  });
		}
		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
  </body>
</html>

Find the complete working sample here.

Do you find this article helpful ?

See results without voting

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working