Current location of a user using the Google Maps engine?

Question

I created a bus route using the Google map engine. I want to add a pointer (marker) that displays the current location of the user on the map. How should I do it? I do not see the possibility for this.

I also export the file in KML format and then read it on my web page, but it does not display the user's current location on the map, but only routes.

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

Answer 1

So, first Google Maps Engine (GME) is the data / service layer. Conversely, the user's position will come from the client / presentation level, which in this case is your browser, mobile device, or more complex setting using an external GPS installation. Therefore, ultimately, moving the user’s location icon on your map is not what you intend to do with GME. Instead, you’ll need to associate the technologies that are available directly to your customer with the functionality displayed in the Google Maps API.

, API HTML- HTML5. . , Google. , /GPS -API, /SDK.

, .

HTML5 , Google

// 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 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 position.
        // If you implement this, it 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;
};