Google Map GPS Locator Using MVC And BootBox

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) {
//Using InfoWindow....
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
//Using BootBox....
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) {
//Using InfoWindow....
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});

Using BootBox....

google.maps.event.addListener(marker, "click", function (e) {
//Using BootBox....
var msg = marker.title;
bootbox.alert(msg);
});

If location not found then warning message will come.

if (navigator.geolocation) {
//If Valid Geo Location there....
}

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.

6 Comments

Join the conversation! Your thoughts help the community grow.

Behdad8y ago
Where can I download Source Link?My email address is [email protected]
- Satyaprakash Samantaray8y ago
  Due to big size of source code I cannot upload.
Shami Sheikh8y ago
I just want to track the vehicle on google map like uber and ola cab. Can you please suggest me how can I achieve this? I will be highly obliged to you.
- Satyaprakash Samantaray8y ago
  I try to mention in my next article.
Garry S9y ago
Hi Satya Great Series man, Thanks!
- Satyaprakash Samantaray9y ago
  Thanks ...........................................