Latest

random

How to Use Google Map in ASP.Net

Introduction
This article demonstrates, what is google api, how to use google maps api v3 in asp.net. Google Maps allows you to display maps on your website. And google maps api lets you customize maps, and information on maps. Lets start with a simple google maps api example. The example creates a Google Map centered in New Delhi, India.

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html> 
<html>
<head>
    <title>how to use google map in html</title>   
<style type="text/css">       
        html
        {
            height: 100%;
        }
       
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_canvas
        {
            height: 100%;
        }
    </style>
   
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
        center: new google.maps.LatLng(28.670106,77.214455),
        zoom: 8, // Zoom Level
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
      }
    </script>
</head>

<body onload="initialize()">  
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>   
</body>
</html>

Now I will explain above example step by step:-
google maps,google maps api v3,Google Maps, Google Maps Applications,Web GIS,Google API, google local maps
add google map to web page
  • Load the Google API 
The Google Maps API is a JavaScript library. It can be added to a web page with a <script> tag:<script src="http://maps.googleapis.com/maps/api/js"></script>


    • Set Map Properties
    Create a function to initialize the map: 
    function initialize() {
    }

    In the initialize function, create an object (mapOptions) to define the properties for the map:
     var mapOptions = {
      center:
    new google.maps.LatLng(
    28.670106,77.214455),
      zoom: 
    8
    ,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    The center property specifies where to center the map. Create a LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude.

    The zoom property specifies the zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.

    The mapTypeId property specifies the map type to display. The following map types are supported:
      • ROADMAP (normal, default 2D map)
      • SATELLITE (photographic map)
      • HYBRID (photographic map + roads and city names)
      • TERRAIN (map with mountains, rivers, etc.)

    Create a Map Container
    Create a <div> element to hold the map. Use CSS to size the element:
    <div id="map_canvas" style="width100%height100%">

    Google API Key
    Google allows your web site to call any Google API, many thousand times per day. If you plan for heavier traffic, you should get a free API key from Google. Go to https://developers.google.com/maps/documentation/javascript/usage.

    I hope that this article would have helped you in understanding what is google api, how to use google map api. Your feedback and constructive contributions are welcome. Please feel free to contact me for feedback or comments you may have about this article.

    No comments:

    All Rights Reserved by Etechpulse © 2015 - 2016
    Powered By Blogger

    Contact Form

    Name

    Email *

    Message *

    Powered by Blogger.