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