Google Map GPS Locator Using MVC And BootBox - Part Thirteen

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

1. How to get current location.
2. Get current location coordinates using bootbox and info window.
3. Implement using mvc and bootstrap.
4. implement in mobile will be more accurate than desktop to get your current location.