Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create a Basic Google Maps

    • 0
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 600
    Comment on it

    Making the google maps is not so difficult. Just to follow some code and google apis.We can make any location google map by using the code below. We have taken the example of dehradun location in India for making this google map.

    <html>
    <head>
    <script
    src="http://maps.googleapis.com/maps/api/js">
    </script>
    
    <script>
    function initialize() {
      var mapProp = {
        center:new google.maps.LatLng(30.321915,78.026619),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    
    <body>
    <div id="googleMap" style="width:500px;height:500px;"></div>
    
    </body>
    </html>
    

    First before writing the code for google map, We have to call Google Maps API . This Api is a JavaScript library.It should be added to the page where we call google maps.

    
    <script src="http://maps.googleapis.com/maps/api/js"></script>

    After calling map api we can set the properties by creating a function to initialize the map and we should create an object named (mapProp) to define the properties for the map.

    function initialize() {
    }
    var mapProp = {
         center:new google.maps.LatLng(30.321915,78.026619), // center property specifies where to //center the map.We can add latitude and longitude here for a particular location
     
     zoom: 7, // zoom property specifies the zoom level.
      mapTypeId: google.maps.MapTypeId.ROADMAP  //   mapTypeId property specifies the map type to display
    };

    after defining the properties , we have defined the size of the map.

    
    <div id="googleMap" style="width:500px;height:500px;"></div>
    
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); //It creates a new map inside the <div> element 

    After defining the size in div we have to add Event Listner to load the map in the div.

    
    google.maps.event.addDomListener(window, 'load', initialize);//this will execute the initialize() function
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: