Procedure to setup your bussiness, office, house and shop address on Google map
Adding a Google Map to your web page is very easy, once you’ve been shown how! That’s what I am going to do in this lesson – I will go over each step of creating a basic Google Map using the JavaScript API.
None of this is specific to Google Maps – it’s the basis for any HTML page. Open your text editor and add this code, then save the file to your desktop as google-maps.html (or any other filename that ends with .html).
Your Google Map requires a page element in which to appear; add a div
tag to the body with an id
attribute of map-canvas
. This creates a container that we’ll reference later in the lesson.
- Creates a div, and gives it a size.
- Loads the Google Maps JavaScript API v3.
- Creates and displays a Google Map in the div.
<!DOCTYPE html><html> <head> <style> #map-canvas { width: 500px; height: 400px; } </style>
<script src=”https://maps.googleapis.com/maps/api/js”></script>
<script>
function initialize() {
var mapCanvas = document.getElementById(‘map-canvas’);
var mapOptions = {
center: new google.maps.LatLng(26.909126,83.964749),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id=”map-canvas”></div>
</body>
</html>
Replace the yellow marked size and Lat-Lng co-ordinates with your Lat-Lng address co-ordinates. I recommend reading the Customizing Google Maps class next. For inspiration, check out some of the applications at morethanamap.com.
Article "How to display your address on Google maps?" protected