How to get google map using two cordinate

Question

Hi    I am creating a c# project in which I have two geocoordinates. by using these two coordinates, I want to create in google map in C# language.

Sachin Singh · Answer

use google map javascript and fetch Lat/long coordinates from database and show it on map                  Lat/Lng Object Literal         "https://polyfill.io/v3/polyfill.min.js?features=default" >               src= "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"          defer       >         "text/css" >               #map {            height: 100%;         }                 html,         body {           height: 100%;           margin: 0;           padding: 0;         }                                   function initMap() {            const  mapOptions = {             zoom: 8,             center: { lat: -34.397, lng: 150.644 },           };           map =  new  google.maps.Map(document.getElementById( "map" ), mapOptions);            const  marker =  new  google.maps.Marker({                      position: { lat: -34.397, lng: 150.644 },             map: map,           });                     const  infowindow =  new  google.maps.InfoWindow({             content:  " Marker Location:"  + marker.getPosition() +  " " ,           });           google.maps. event .addListener(marker,  "click" , () => {             infowindow.open(map, marker);           });         }                            "map" >

Rajesh Gami · Answer

You can follow below step to display Map   Step 1 First You have already created Database, If not then create DB              Table Name = Locations Locations  table  fields      Col_Name          Data Type      Name                  varchar (50)   Latitude              numeric (18,6)   Longitude           numeric (18,6)   Description          varchar (300)   Step 2 : In C# create aspx page   Step 3: In aspx cs file write below code  using  System;   using  System.Collections.Generic;   using  System.Linq;   using  System.Web;   using  System.Web.UI;   using  System.Web.UI.WebControls;   using  System.Data;   using  System.Configuration;   using  System.Data.SqlClient;      public  partial  class  CS : System.Web.UI.Page   {        protected   void  Page_Load( object  sender, EventArgs e)       {            if  (! this .IsPostBack)           {               DataTable dt =  this .GetData( "select * from Locations" );               rptMarkers.DataSource = dt;               rptMarkers.DataBind();           }       }           private  DataTable GetData( string  query)       {            string  conString = ConfigurationManager.ConnectionStrings[ "constr" ].ConnectionString;           SqlCommand cmd =  new  SqlCommand(query);            using  (SqlConnection con =  new  SqlConnection(conString))           {                using  (SqlDataAdapter sda =  new  SqlDataAdapter())               {                   cmd.Connection = con;                      sda.SelectCommand = cmd;                    using  (DataTable dt =  new  DataTable())                   {                       sda.Fill(dt);                        return  dt;                   }               }           }       }   }   Step 4 : Now add below html and script in your aspx page design "C#"  AutoEventWireup= "true"  CodeFile= "CS.aspx.cs"  Inherits= "CS"  %>          "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >     "http://www.w3.org/1999/xhtml" >     "server" >                              "form1"  runat= "server" >          "text/javascript"  src= "http://maps.googleapis.com/maps/api/js?sensor=false" >           "text/javascript" >          var  markers = [          "rptMarkers"  runat= "server" >                            {                      "title" :  ' ' ,                      "lat" :  ' ' ,                      "lng" :  ' ' ,                      "description" :  ' '                  }                                 ,                             ];                    "text/javascript" >                  window.onload =  function  () {                  var  mapOptions = {                     center:  new  google.maps.LatLng(markers[0].lat, markers[0].lng),                     zoom: 8,                     mapTypeId: google.maps.MapTypeId.ROADMAP                 };                  var  infoWindow =  new  google.maps.InfoWindow();                  var  map =  new  google.maps.Map(document.getElementById( "dvMap" ), mapOptions);                  for  (i = 0; i                   var  data = markers[i]                      var  myLatlng =  new  google.maps.LatLng(data.lat, data.lng);                      var  marker =  new  google.maps.Marker({                         position: myLatlng,                         map: map,                         title: data.title                     });                     ( function  (marker, data) {                         google.maps.event.addListener(marker,  "click" ,  function  (e) {                             infoWindow.setContent(data.description);                             infoWindow.open(map, marker);                         });                     })(marker, data);                 }             }                    "dvMap"  style= "width: 500px; height: 500px" >                                 Check it and Run