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.
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.
Building multiple sitemaps for very large websites
How to build a search engine friendly sitemap?
How to embed Google Ads in a responsive website?
How to tell search engines not to crawl your entire website?
How to move your Email accounts from one hosting provider to another without losing any mails?
How to resolve the issue of receiving same email message multiple times when using Outlook?
Self Referential Data Structure in C - create a singly linked list
Mosquito Demystified - interesting facts about mosquitoes
Elements of the C Language - Identifiers, Keywords, Data types and Data objects
How to pass Structure as a parameter to a function in C?
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.