<div class="map" id="map"></div>


<!--<div>
  <small style="font-size:.3em;color:#ccc;text-transform:uppercase;padding-bottom:10px;display:inline-block;"><b>status:</b> currently not working due to load requests</small><br>
  <span class="hello">Hello Stranger</span>
<p><span class="city-region"></span></p>
</div>
</body>-->
<br>
               <a onclick="window.open('https://whoisthisharunpehlivan.glitch.me','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#">WHO IS THIS HARUN PEHLIVAN ?</a>
html, 
body
  width: 100%
  height: 100%
  margin: 1em
  font-family: Arial, sans-serif
  background-color: #444
  
.map
  width: 100%
  max-width: 900px
  height: 500px
  background: none
  margin: 0 auto
  
.no-geolocation,
.no-permission
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: rgba(#bada55, 0.9)
  color: darken(#bada55, 40%)

.message 
  position: absolute
  top: 50%
  left: 50%
  font-size: 2vw
  transform: translate(-50%, -50%)
  
  &.is-visible
    opacity: 1
    visibility: visible
  
  &.is-hidden
    opacity: 0
    visibility: hidden

* 
  box-sizing: border-box
  
//div
  width: 100%
  max-width: 300px
  background-color: #fff
  padding: 2em
  text-align: center
  border-top: 8px solid #349EDB
  margin-top: 15%
  margin-left: auto
  margin-right: auto
  
p 
  font-size: 1.2em
  color: #999
  
.city-region 
  font-weight: bold
  color: #333
  
  &:before
    content: "How's the weather in "
    color: #999
    font-weight: 300
  
  &:after
    content: '?'
    color: #999
    font-weight: 300
  
.hello
  font-size: 11px
  text-transform: uppercase
  letter-spacing: 1px
  font-weight: bold
  color: #349EDB
(function ( $, window, document, undefined ) {

    var pluginName = "currentLocation",
        defaults = {
            propertyName: "value",
            mapOptions : {
                zoom: 5,
                center: new google.maps.LatLng(41.850033, -87.6500523),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true,
                styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#bada55"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":60}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]}]
            },
            geo_options : {
                enableHighAccuracy : true, 
                maximumAge         : 30000, 
                timeout            : 27000
            }
        };

    function Plugin ( element, options ) {
        this.element = element;
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.map;
        this.marker;
        this.locationWatcher;
        this.init();
    }

    $.extend(Plugin.prototype, {
        init: function () {
            this.createMap();
        },
        createMap: function () {
            var _this = this;
            
            _this.map   = new google.maps.Map(document.getElementById('map'), _this.settings.mapOptions);

            _this.getLocation();
        },
        getLocation: function () {
            var _this = this;
          
            if ("geolocation" in navigator) {
                $('.no-permission').addClass('is-hidden')
                    .removeClass('is-visible');
              
                navigator.geolocation.getCurrentPosition(function(position) {
                    _this.repositionMap(position.coords.latitude, position.coords.longitude);
                });
            } else {
                $('.no-geolocation').addClass('is-visible')
                    .removeClass('is-hidden');
            }
        },
        watchLocation: function () {
            var _this = this,
                geo_success = function (position) {
                     console.log(position);
                    _this.repositionMap(position.coords.latitude, position.coords.longitude);
                },
                geo_error = function () {
                    console.warn('Unable to get location');
                }

            _this.locationWatcher = navigator.geolocation.watchPosition(geo_success, geo_error, _this.geo_options);
        },
        repositionMap: function (lat, long) {
            var _this = this;
          
            _this.map.panTo(new google.maps.LatLng(lat, long));
            _this.map.setZoom(16);
          
            _this.marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, long),
                map: _this.map
            });
          
            _this.watchLocation();
        }
    });

    $.fn[ pluginName ] = function ( options ) {
        this.each(function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
            }
        });

        return this;
    };

})( jQuery, window, document );

$('#map').currentLocation();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maps.googleapis.com/maps/api/js?key=AIzaSyDZJyatQOMsKV6WP9703CrHb1QCsyRl3P0