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>
</div>

<style>
 #map-canvas img{max-width:none}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<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, 
		      google.maps.MapTypeId.ROADMAP, 
		      google.maps.MapTypeId.SATELLITE, 
		      google.maps.MapTypeId.TERRAIN],
        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;
//-->
</script>

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 https://maps.google.com/. 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 -https://maps.google.com/maps? 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.


Share:
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 © How2Lab.com. All rights reserved.