1var map,
2    faisalabad = {lat:31.4181, lng:73.0776};
3
4function addYourLocationButton (map, marker) 
5{
6    var controlDiv = document.createElement('div');
7
8    var firstChild = document.createElement('button');
9    firstChild.style.backgroundColor = '#fff';
10    firstChild.style.border = 'none';
11    firstChild.style.outline = 'none';
12    firstChild.style.width = '28px';
13    firstChild.style.height = '28px';
14    firstChild.style.borderRadius = '2px';
15    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
16    firstChild.style.cursor = 'pointer';
17    firstChild.style.marginRight = '10px';
18    firstChild.style.padding = '0';
19    firstChild.title = 'Your Location';
20    controlDiv.appendChild(firstChild);
21
22    var secondChild = document.createElement('div');
23    secondChild.style.margin = '5px';
24    secondChild.style.width = '18px';
25    secondChild.style.height = '18px';
26    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
27    secondChild.style.backgroundSize = '1100px 18px';
28    secondChild.style.backgroundPosition = '0 0';
29    secondChild.style.backgroundRepeat = 'no-repeat';
30    firstChild.appendChild(secondChild);
31
32    google.maps.event.addListener(map, 'center_changed', function () {
33        secondChild.style['background-position'] = '0 0';
34    });
35
36    firstChild.addEventListener('click', function () {
37        var imgX = 0,
38            animationInterval = setInterval(function () {
39                imgX = -imgX - 18 ;
40                secondChild.style['background-position'] = imgX+'px 0';
41            }, 500);
42
43        if(navigator.geolocation) {
44            navigator.geolocation.getCurrentPosition(function(position) {
45                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
46                map.setCenter(latlng);
47                clearInterval(animationInterval);
48                secondChild.style['background-position'] = '-144px 0';
49            });
50        } else {
51            clearInterval(animationInterval);
52            secondChild.style['background-position'] = '0 0';
53        }
54    });
55
56    controlDiv.index = 1;
57    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
58}
59
60
61map = new google.maps.Map(document.getElementById('map'), {
62  zoom: 15,
63  center: faisalabad
64});
65var myMarker = new google.maps.Marker({
66  map: map,
67  animation: google.maps.Animation.DROP,
68  position: faisalabad
69});
70addYourLocationButton(map, myMarker);
71