Introduction
What Is Bootbox In Asp.net Mvc?
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes
using Bootstrap modals creating, managing or removing any of the required DOM elements or JS event handlers.
Bootbox.js is designed to make using Bootstrap modals easier.
Description
Here i will show you how to know your current location using google map GPS.
Then using marker you can find your current location coordinates.
To know more details about Google map , Visit My Blogs and articles.
- http://www.c-sharpcorner.com/members/satyaprakash-samantaray
Go through my previous blogs related to google map Part-12 before using this.
Steps To Be Followe,
Step1
Create a controller action method named "GPS()".
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
-
- namespace SatyaGoogleMapBootstrapMVC.Controllers
- {
- public class HomeController : Controller
- {
- public ActionResult GPS()
- {
- return View();
- }
- }
- }
Create a view named "GPS.cshtml".
- @{
- ViewBag.Title = "Satyaprakash Goolge Map Gps Locator";
- }
-
- <title>@ViewBag.Title</title>
-
- <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Google Map GPS Locator Using MVC and BootBox</h2>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-
-
- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
-
- <script src="bootbox.min.js"></script>
-
- <style>
- #dvMap {
- height: 50%;
- }
- </style>
-
- <script type="text/javascript">
- if (navigator.geolocation) {
- navigator.geolocation.getCurrentPosition(function (p) {
- var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
- var mapOptions = {
- center: LatLng,
- zoom: 13,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
- var marker = new google.maps.Marker({
- position: LatLng,
- map: map,
- title: "<div style='font-size:large; font-family: Arial Black; background-color:yellow; color:blue; text-align: center'>Your Current Location Coordinates:<br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
- });
- google.maps.event.addListener(marker, "click", function (e) {
-
- var infoWindow = new google.maps.InfoWindow();
- infoWindow.setContent(marker.title);
- infoWindow.open(map, marker);
-
- var msg = marker.title;
- bootbox.alert(msg);
- });
- });
- } else {
- alert('Geo Location feature is not supported in this browser.');
- }
- </script>
-
- <div id="dvMap">
- </div>
-
- <footer>
- <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
- </footer>
I wrote code for my current location.
- navigator.geolocation.getCurrentPosition(function (p) {
- var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
- var mapOptions = {
- center: LatLng,
- zoom: 13,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
Then i configure the marker and pass div id of map.
- var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
- var marker = new google.maps.Marker({
- position: LatLng,
- map: map,
- title: "<div style='font-size:large; font-family: Arial Black; background-color:yellow; color:blue; text-align: center'>Your Current Location Coordinates:<br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
- });
Then on click event of marker the current location coordinates will show using Info Window and BootBox Alert PopUp.
Using InfoWindow....
- google.maps.event.addListener(marker, "click", function (e) {
-
- var infoWindow = new google.maps.InfoWindow();
- infoWindow.setContent(marker.title);
- infoWindow.open(map, marker);
- });
Using BootBox....- google.maps.event.addListener(marker, "click", function (e) {
-
- var msg = marker.title;
- bootbox.alert(msg);
- });
If location not found then warning message will come.
- if (navigator.geolocation) {
-
- }
- else {
- alert('Geo Location feature is not supported in this browser.');
- }
I added BootBox Script File.
- <script src="bootbox.min.js"></script>
I added this zip file of "bootbox.min.js".
OUTPUT
Desktop View For InfoWindow and BootBox
Mobile View For InfoWindow and BootBox
Gif Images for Better Understanding Using InfoWindow and BootBox....
SUMMARY
- How to get current location.
- Get current location coordinates using bootbox and info window.
- Implement using mvc and bootstrap.
- implement in mobile will be more accurate than desktop to get your current location.