CODEWITHSUNDEEP
htmlgoogle-maps-api-3
hobbes3
hobbes3

Reputation: 30218

Show My Location on Google Maps API v3

"My Location" in Google Maps javascript API

This question was asked over half a year ago. Has Google Maps API v3 updated to use the "My Location" button found on http://maps.google.com?

My Location is the control between the Street View man and the gamepad-looking controls.

If Google Maps API doesn't provide My Location then do I need to write my own HTML5 geolocation feature using navigator.gelocation then create my own control on Google Maps?

Upvotes: 18

Views: 58931

Answers (4)

josh3736
josh3736

Reputation: 144912

No, but adding your own marker based on current location is easy:

var myloc = new google.maps.Marker({
    clickable: false,
    icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
                                                    new google.maps.Size(22,22),
                                                    new google.maps.Point(0,18),
                                                    new google.maps.Point(11,11)),
    shadow: null,
    zIndex: 999,
    map: // your google.maps.Map object
});

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
        var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
        myloc.setPosition(me);
    }, function(error) {
        // ...
    });
}

Upvotes: 59

Jitendra Tyagi
Jitendra Tyagi

Reputation: 183

//copy and paste this in your script section.
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
} else {
    alert('location not supported');
}

//callbacks
function error(msg) {
    alert('error in geolocation');
}

function success(position) {
    var lats = position.coords.latitude;
    var lngs = position.coords.longitude;
    alert(lats);
    alert(lngs)
};

Upvotes: 1

mi3afzal
mi3afzal

Reputation: 820

you have to do it by your own. Here is a piece of code to add "Your Location" button. HTML

<div id="map">Map will be here</div>

CSS

#map {width:100%;height: 400px;}

JS

var map;
var faisalabad = {lat:31.4181, lng:73.0776};

function addYourLocationButton(map, marker) 
{
    var controlDiv = document.createElement('div');

    var firstChild = document.createElement('button');
    firstChild.style.backgroundColor = '#fff';
    firstChild.style.border = 'none';
    firstChild.style.outline = 'none';
    firstChild.style.width = '28px';
    firstChild.style.height = '28px';
    firstChild.style.borderRadius = '2px';
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
    firstChild.style.cursor = 'pointer';
    firstChild.style.marginRight = '10px';
    firstChild.style.padding = '0px';
    firstChild.title = 'Your Location';
    controlDiv.appendChild(firstChild);

    var secondChild = document.createElement('div');
    secondChild.style.margin = '5px';
    secondChild.style.width = '18px';
    secondChild.style.height = '18px';
    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)';
    secondChild.style.backgroundSize = '180px 18px';
    secondChild.style.backgroundPosition = '0px 0px';
    secondChild.style.backgroundRepeat = 'no-repeat';
    secondChild.id = 'you_location_img';
    firstChild.appendChild(secondChild);

    google.maps.event.addListener(map, 'dragend', function() {
        $('#you_location_img').css('background-position', '0px 0px');
    });

    firstChild.addEventListener('click', function() {
        var imgX = '0';
        var animationInterval = setInterval(function(){
            if(imgX == '-18') imgX = '0';
            else imgX = '-18';
            $('#you_location_img').css('background-position', imgX+'px 0px');
        }, 500);
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                marker.setPosition(latlng);
                map.setCenter(latlng);
                clearInterval(animationInterval);
                $('#you_location_img').css('background-position', '-144px 0px');
            });
        }
        else{
            clearInterval(animationInterval);
            $('#you_location_img').css('background-position', '0px 0px');
        }
    });

    controlDiv.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
}

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: faisalabad
    });
    var myMarker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        position: faisalabad
    });
    addYourLocationButton(map, myMarker);
}

$(document).ready(function(e) {
    initMap();
});

Upvotes: 3

MapTiler
MapTiler

Reputation: 1799

We have made such a component for Google Maps API v3. Anybody can use in custom projects to add a control showing current geolocation with just one line of code:

var geoloccontrol = new klokantech.GeolocationControl(map, mapMaxZoom);

after including in the HTML header this JavaScript:

<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>

See:

http://www.maptiler.com/maptilerlayer/

for an example code and documentation.

Show My Location Control on Google Maps API v3

It adds the standard control to the map - and once tapped - it shows the blue circle around your location with size derived from precision of the location data available. If you don't drag the map it will keep you positioned once you move.

This control has been developed for viewer automatically generated by http://www.maptiler.com/ software - which creates tiles for map overlays and custom layers made from images and raster geodata.

Upvotes: 5

Related Questions