How to display your address on Google maps?

 

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.

Vikinspire Developers Pvt. Ltd, Bawli Chowk, Padrauna, Kushinagar, Uttar Pradesh, 274304 Address Vikinspire Developers Pvt. Ltd, Bawli Chowk, Padrauna, Kushinagar, Uttar Pradesh, 274304

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

Post a Comment

Previous Post Next Post