Add Google Map to your website

Adding maps to your site is quite easy with Google Maps Api V3.
Before you proceed with the working with Google Map Api you need an API Key from Google. You can create an API Key by signing into your Google Account.

To create your API key follow the instructions:
  1. Visit the APIs Console at https://code.google.com/apis/console
  2. Log in with your Google Account.
  3. Click the Services link from the left-hand menu.
  4. Activate the Google Maps API v3 service.
  5. Click the API Access link from the left-hand menu.
You will get your API Key under Simple API Access section.

Now you are ready to Create a Google Map. Use your own API Key in the following url used in the sample code.

http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false_or_true

Sample code is given here

 <!DOCTYPE html>
  <html>
  <head>
  <script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY&sensor=false">
  </script>
  
  <script>
  var place=new google.maps.LatLng(28.632778,77.219722);
  
  function initialize(){
  var param = {
    center:place,
    zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP
    };
  var map=new google.maps.Map(document.getElementById("myMap"),param);
  
  var marker=new google.maps.Marker({
    position:place
    });
  marker.setMap(map);
  }
 google.maps.event.addDomListener(window,'load',initialize);
  </script>
  </head>
  <body>
  <div id="myMap" style="width:450px;height:320px;"></div>
  </body>
  </html>


Output of the above code


Add Google Map to your website Add Google Map to your website Reviewed by Altaf Hussain on 12:53 PM Rating: 5

2 comments:

  1. Good morning sir
    I want to create google map automatically when user type address and location in textbox

    Is it Possible

    ReplyDelete
    Replies
    1. Yes, Its possible just read the address from textbox, get latitude and longitude for that address and pass it to

      var place=new google.maps.LatLng(28.632778,77.219722);

      To get latitude and longitude form address see this post

      http://altafphp.blogspot.in/2012/09/get-latitude-and-longitude-from-address.html

      Delete

Altaf Web. Powered by Blogger.