CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-markers
Jek
Jek

Reputation: 33

How to show circle on Google Maps?

I know that this question is asked frequently, but I have a problem to show circles on my Google Map.

Actually, I get markers on my maps. 

import htmlTemplate from './activityDetails.html';

export default {

  template: htmlTemplate,

  require: {
    parent: '^main'
  },

  bindings: {
    activity: '<'
  },

  controller: function controller(MapsService, GeolocationService, NgMap, $log) {
    'ngInject';

    this.$onInit = () => {
      // Load Google Maps API script
      MapsService.loadGoogleApi().then(() => {
        this.loaded = true;
        NgMap.getMap().then((map) => {
          this.map = map;
          $log.info('activityDetails component init');
          this.activity.lat = this.activity.location.coordinates[0];
          this.activity.lng = this.activity.location.coordinates[1];
          // Save each marker in its user object to facilitate hover
          this.createMarkers();
          // Set geolocation notification hook
          this.setGeolocationHook();
        });
      });
    };
  }
};
<div class="block-map col m6">
    <ng-map class="map" center="{{$ctrl.activity.lat}}, {{$ctrl.activity.lng}}" zoom="16">
      <marker position="{{$ctrl.activity.lat}}, {{$ctrl.activity.lng}}"></marker>
    </ng-map>
  </div>

My question is: How to replace my markers by circles?

Thanks a lot !

Upvotes: 0

Views: 1732

Answers (1)

dome2k
dome2k

Reputation: 867

You can add "Circles" to your map as described in the official API documentation.

https://developers.google.com/maps/documentation/javascript/examples/circle-simple

Important is this part:

var cityCircle = new google.maps.Circle({
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: map,
  center: citymap[city].center,
  radius: Math.sqrt(citymap[city].population) * 100
});

It's pretty straight forward.

Instead of citymap[city].center you need to pass your lat/lang object, for example {lat: 41.878, lng: -87.629}.

For the radius you can pass any number value. In the maps demo they used the population.

For NG-Map:

<shape name="circle" ng-repeat="circle in vm.circles" no-watcher="true"
  stroke-color="#FF0000"
  stroke-opacity="0.8"
  stroke-weight="2"
  fill-color="#FF0000"
  fill-opacity="0.35"
  center="{{circle.position}}"
  radius="{{circle.radius}}">
</shape>

Upvotes: 1

Related Questions