¤ 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

Buy Domain & Hosting from the most reliable and trusted company - WebServicesWorldWide.com.

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