How2Lab Logo
tech guide & how tos..

How to embed a Google Map in your website contact page?

Google map can be beautifully rendered in your own website using the Google Maps JavaScript API.

Here is the full code for embedding a location map in your HTML source file. You may place this code in a suitable location where you want the map displayed:

<div id="map-canvas">
 <div id=map1 style="height:400px"></div>

 #map-canvas img{max-width:none}

<script type="text/javascript" src="">

<script type="text/javascript">
var map;
var markers = new Array();
var infos = new Array();
var polylines = new Array();
var geoMarker = null;
var geoInfo = null;
var lat = 22.80270609254608;
var lng = 86.12269929447745;

function initialize()
    var latlng = new google.maps.LatLng(lat,lng);
    var mapTypeControlOptions = {
        mapTypeIds: [ google.maps.MapTypeId.HYBRID, 
        position: google.maps.ControlPosition.RIGHT_TOP,
        style: google.maps.MapTypeControlStyle.DEFAULT
    var overviewMapControlOptions = { opened: false };
    var panControlOptions = { position: google.maps.ControlPosition.LEFT_TOP };
    var rotateControlOptions = { position: google.maps.ControlPosition.LEFT_TOP };
    var scaleControlOptions = { position: google.maps.ControlPosition.LEFT_BOTTOM, 
			    style: google.maps.ScaleControlStyle.DEFAULT };
    var zoomControlOptions = { position: google.maps.ControlPosition.LEFT_TOP, 
			    style: google.maps.ZoomControlStyle.DEFAULT };
    var myOptions = {
        mapTypeControlOptions: mapTypeControlOptions,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        overviewMapControlOptions: overviewMapControlOptions,
        panControlOptions: panControlOptions,
        rotateControlOptions: rotateControlOptions,
        scaleControlOptions: scaleControlOptions,
        zoom: 16,
        zoomControlOptions: zoomControlOptions,
        center: latlng
    map = new google.maps.Map(document.getElementById("map1"), myOptions);
    markers[0] = new google.maps.Marker({
        title: "Our Office Location",
        position: new google.maps.LatLng(lat,lng),
        map: map
    infos[0] = null;
	if (typeof mbOnAfterInit == "function") mbOnAfterInit(map);
window.onload = initialize;

Change the zoom value under myOptions from 16 to say, 18 or 14 and see the effect.

Replace lat and lng values with the actual co-ordinates of your office location.

How do you find the actual co-ordinates of your office location?

Go to Search for your office location by typing your full address in search box. See image below.

The map of your location will show up with a red marker on it, as shown below.

Click at the Link Button on the top-left to open the Embed Code popup. See image below.

Copy the embed code in a blank text file. It will like this - q=shatabdi+tower, +sakchi, +jamshedpur &hl=en &sll=37.0625,-95.677068 &sspn=37.683309,86.572266 &hnear=Shatabdi+ Tower,+ Ambagan,+ Sakchi,+ Jamshedpur,+ East+ Singhbhum,+ Jharkhand+ 831001,+ India &t=m&z=16.

The highlighted values are your location's lat and lng values, in order. Note that they correspond to the argument sspn.

Buy Domain & Hosting from a trusted company
Web Services Worldwide | Hostinger
About the Author
Rajeev Kumar
CEO, Computer Solutions
Jamshedpur, India

Rajeev Kumar is the primary author of How2Lab. He is a B.Tech. from IIT Kanpur with several years of experience in IT education and Software development. He has taught a wide spectrum of people including fresh young talents, students of premier engineering colleges & management institutes, and IT professionals.

Rajeev has founded Computer Solutions & Web Services Worldwide. He has hands-on experience of building variety of websites and business applications, that include - SaaS based erp & e-commerce systems, and cloud deployed operations management software for health-care, manufacturing and other industries.

Refer a friendSitemapDisclaimerPrivacy
Copyright © All rights reserved.