¤ Home » Internet » How to embed a Google Map in your website contact page?

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="http://maps.google.com/maps/api/js?sensor=false">

<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 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.


comments powered by Disqus

Download Mobile App for Android

Looking to build a website?
Launch a 5 page website in 1 day at only Rs.499/year. Hosting included.

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 XLRI, industry professionals, and govt. officials.

Rajeev has founded Computer Solutions & WebServicesWorldwide.com, and has hands-on experience of building variety of web applications and portals, that include - SAAS based ERP & e-commerce systems, independent B2B, B2C, Matrimonial & Job portals, and many more.

Copyright © How2Lab.com. All rights reserved.

Refer a friend | Sitemap | Disclaimer | Privacy Policy