CODEWITHSUNDEEP
google-mapsangulartypescriptionic2
RSA
RSA

Reputation: 1449

how to show two location in map and automatically set zoom level and center of this point in ionic2?

I want to show two location with marker in map and automatically set zoom level and center of this point in ionic 2 this code shows both 2 different points and marker but if my position is outside of this markers position they will not be shown in canvas

initializeMap() {
let minZoomLevel = 12;
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
        this.OriginMarker(this.start_point);
        this.TargetMarker(this.end_point);
});
}
OriginMarker(data){  
  var latlng : string = data.split(',');
  var LatLng = new google.maps.LatLng(+latlng[0],+latlng[1]);  
   let image = 'assets/img/Untitled-1.png';   
   let marker = new google.maps.Marker({    
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: LatLng, icon: image
  }); 

}

TargetMarker(data) {
  var latlng : string = data.split(',');
  var LatLng = new google.maps.LatLng(+latlng[0],+latlng[1]);  
    let image = 'assets/img/Untitled-2.png';
    let marker = new google.maps.Marker({
     map: this.map,
    animation: google.maps.Animation.DROP,
    position: LatLng , icon: image
  }); 
}

Upvotes: 1

Views: 1100

Answers (1)

Sabari
Sabari

Reputation: 1981

Try this:-

bounds: any;

    this.bounds = new google.maps.LatLngBounds();

        createMarker(latitude:number,longitude:number) {
            let latLng = new google.maps.LatLng(latitude, longitude);
            var marker = new google.maps.Marker({
              position: latLng,
              map: this.map,
              title: "title"
            });

            this.bounds.extend(new google.maps.LatLng(marker.position.lat(), marker.position.lng()));

          }

Your code:

bounds: any;

initializeMap() {
let minZoomLevel = 12;
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
 this.bounds = new google.maps.LatLngBounds();
var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
        this.OriginMarker(this.start_point);
        this.TargetMarker(this.end_point);
   this.map.fitBounds(this.bounds); //# auto - zoom
          this.map.panToBounds(this.bounds); //# auto-center
});
}
OriginMarker(data){  
  var latlng : string = data.split(',');
  var LatLng = new google.maps.LatLng(+latlng[0],+latlng[1]);  
   let image = 'assets/img/Untitled-1.png';   
   let marker = new google.maps.Marker({    
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: LatLng, icon: image
  }); 
    this.bounds.extend(new google.maps.LatLng(marker.position.lat(), marker.position.lng()));
}

TargetMarker(data) {
  var latlng : string = data.split(',');
  var LatLng = new google.maps.LatLng(+latlng[0],+latlng[1]);  
    let image = 'assets/img/Untitled-2.png';
    let marker = new google.maps.Marker({
     map: this.map,
    animation: google.maps.Animation.DROP,
    position: LatLng , icon: image
  }); 
  this.bounds.extend(new google.maps.LatLng(marker.position.lat(), marker.position.lng()));
}

Upvotes: 4

Related Questions