Latest

random

How to make a map on Google Maps - Simple Example

How to use Google Maps in ASP .Net


In this article I will explain how to build a map using Google Map API v3, by using Google Maps Library, you can create your own map. Here's the sample below:

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to make a map on google maps in asp.net</title>
    <style type="text/css">
        html, body, #map-canvas
        {
            margin: 0;
            padding: 0;
            height: 550px;
            width: auto;
        }
    </style>

    <%--Google Maps API--%>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script type="text/javascript">
        var map;                                        // Declaring a global variable
        function initialize() {
          var mapOptions = {
            zoom: 4,                                    // Set Zoom Level
            center: new google.maps.LatLng(24, 75),     // Set the Latitude and longitude of the location
            mapTypeId: google.maps.MapTypeId.ROADMAP    // Set Map Type Here ROADMAP, TERRAIN, SATELLITE
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),      // Creating the map object to desplay
              mapOptions);        }      
    </script>

</head>
<body onload="initialize();">
    <form id="form1" runat="server">
    Hello India! :-)
    <br />
    <br />
    <div id="map-canvas">
    </div>
    </form>
</body>
</html>

Output

how to make a map on google maps,build a map,creating a map,make maps

Note:
  • Declare the application as HTML5 using the <!DOCTYPE html> declaration.
  • Include the Maps API JavaScript using a <script> tag.
  • Create a div element named map-canvas to hold the Map.
  • Create a JavaScript object(mapOptions) literal to hold a number of map properties.
  • Write a JavaScript function to create a map object.
  • Initialize the map object from the body tag's onload event onload="initialize();".


Download the source code click here ..

No comments:

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

Contact Form

Name

Email *

Message *

Powered by Blogger.