Google Maps : How to put blue dot (and circle) marker with arrow for the current position like Google Map App?

ionic-v1
1

Hello,

Please, can you help me ?

I can manage to display a map with my current position with the Google Maps API.

for that, I use :

But, I can’t manage to display a marker like in attachment.

  • Then, I would like following my current position (every 2 seconds)
  • And, I would like to add a button when I click in it, my current position will be centered in the map

Thank you for your help :wink:

2

Any help, any idea, please ?

3

Hi, I did this, what do you think ?

with :

For the button to geocalized, i did :

<ion-content scroll="false">
          <div class="css_map" data-ng-controller="mapCtrl">
            <div id="map" >
            </div>
            <button id="GeoButton" ng-click="GeoMe()" ><i class="icon ion-android-locate"></i></button>
          </div>
</ion-content>

.css_map{
  width: 100%;
  height: 100%;
}

#map{
  width : 100%;
  height: 100%;
  z-index: 1;
}

#GeoButton{
  position:absolute;
  z-index: 99;

  right: 20px;
  bottom: 30px;
  width: 50px;
  height: 50px;

  font-size: 30px;
  color: red;  
}

And for the blue dot or blue circle, I did this :

.controller('mapCtrl', function($scope, $ionicLoading, $cordovaGeolocation, $timeout ) { ...

var image = 'file:///android_asset/www/img/target.png';

watchID = navigator.geolocation.watchPosition(function(position){
  my_current_position = new   google.maps.LatLng(position.coords.latitude,position.coords.longitude);

    	geoMarker.setMap(null);
    	geoMarker = new google.maps.Marker({
				position: my_current_position,
				map: map,
				title: 'My Position',
				icon : image
			}); // end of geoMarker = new google.maps.Marker({ 

....

Here, I didn’t used, here after, because I think, there is a bug

var watch = $cordovaGeolocation.watchPosition({
    frequency: 1000
  });

  watch.promise.then(function() {

Thanks for your feed back !