CODEWITHSUNDEEP
google-mapskmlgoogle-maps-engine
user3398326
user3398326

Reputation: 544

Current location of user using google map engine?

I have created a bus route using Google map engine. I want to add a pointer(marker) which will display the current location of the user on the map How do i do that ? I don't see an option for that.

Also I am exporting the file in KML format and then reading it on my webpage but it would not show the current location of the user on the map but just the routes.

https://mapsengine.google.com/map/edit?mid=z0-DS05yFIOY.kaEp4978lVdI

Upvotes: 4

Views: 320

Answers (1)

elrobis
elrobis

Reputation: 1562

Ok first, Google Maps Engine (GME) is mostly a data/services layer. Conversely, the user's position will come from the client/presentation layer, which in this case is your browser, mobile device, or a more complex setup using an external GPS rig. So ultimately, moving a user-location icon around in your map isn't something you're going to accomplish with GME. Instead, you'll need to pair technology that's directly available to your client with functionality exposed in the Google Maps API.

I'll show you a browser-based solution here, which implements the HTML5 Geolocation API. Here's another discussion and example. And if you have other questions, you'll find it's easy to Google. If you're developing a native application for a mobile device, you'll need to research the counterpart location/GPS API relevant to your framework/SDK.

Hopefully this helps.

Using HTML5 Geolocation to Show the User's Changing Location in a Google Map

// Make sure you scope these variables properly, I'm showing them
// at the global/application level..
var _MobilePosition;
var _LAST_GPS_ERROR;


// A simple icon/marker to represent the user's location in the map..
var _MobileIcon = {
    path: 'M 0, 0 m -5, 0 a 5, 5 0 1, 0 10, 0 a 5, 5 0 1, 0 -10, 0',
    fillColor: '#00FF00',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: '#00FF00',
    strokeWeight: 0
};

var _MobileMarker = new google.maps.Marker({
    icon: _MobileIcon
});    


// WPID = "Watch Position ID".
//
// This is where you start handling the HTML5 geolocation API. Every so many 
// seconds it fires and forwards GPS data to your geo_success or geo_error 
// functions..
//
var _WPID = navigator.geolocation.watchPosition(
    geo_success, 
    geo_error, 
    {
        enableHighAccuracy:true, 
        timeout:5000,
        maximumAge:1000
    }
);


// Handle successful GPS positioning by moving a user position marker around
// in the map..
//
function geo_success(pos)
{
    // This condition prevents moving the marker before the maps library is
    // loaded. Depending how you use this, you may not need this condition.
    //
    if(typeof google.maps.LatLng !== 'undefined')
    {
        var lat = Number(pos.coords.latitude);
        var lng = Number(pos.coords.longitude);

        _MobilePosition = new google.maps.LatLng(lat,lng);

        _MobileMarker.setVisible(true);
        _MobileMarker.setPosition(_MobilePosition);
        _MobileMarker.setMap(_map);

        // Optional: pan the map to the user's position.
        // If you implement this, it's a good idea to give the user
        // some means of disabling this functionality..
        //
        if( typeof _MobilePosition !== 'undefined' )
        {
            _map.panTo(_MobilePosition);
        }
    }
}


// Catch any errors thrown by the geolocation API. I'm not doing anything
// useful with it in this example, just catching it..
// 
function geo_error(error)
{
    _LAST_GPS_ERROR = error;
};

Upvotes: 0

Related Questions