cómo usar google maps con ejemplo de código angular

Nuestro team especializado pasados ciertos días de trabajo y de recopilar de información, dieron con los datos necesarios, nuestro deseo es que te resulte útil para tu plan.

Ejemplo: mapas de google angulares

Step1:CreatingnewprojectCreate a newproject using command ng newgmaps-ng5
Step2:InstallGoogleMaps types for typescript support.Run command npm install --save @types/googlemaps
Step3:LinkGoogleMapsJavaScriptCDN inside index.html<script src="http://maps.googleapis.com/maps/api/js"></script>NOTE:Make sure you put your GoogleMapAPIKey here.You can get one from`https://developers.google.com/maps/documentation/javascript/get-api-key`.If not, after free usage,GoogleMap will start showing watermark.With above steps, you are all set to start working withGoogleMaps(GMap).Step4:Next,let’s add a placeholder <div>forGMap<div #gmap style="width:100%;height:400px"></div>Step5:InitializeGMap inside component

	importViewChildfrom'@angular/core';importfrom'@types/googlemaps';exportclassAppComponent  
	  @ViewChild('gmap') gmapElement: any;
	  map: google.maps.Map;ngOnInit()var mapProp =
		  center:newgoogle.maps.LatLng(18.5793,73.8143),
		  zoom:15,
		  mapTypeId: google.maps.MapTypeId.ROADMAP;this.map=newgoogle.maps.Map(this.gmapElement.nativeElement, mapProp);Let’sbreak it down.importfrom'@types/googlemaps';First we shall importGoogleMaps types that we have installed in step 2.This is great help during development as you can work with strong types instead of vague any type.Apartfrom that, you shall also get intellisense if your IDE can understand type definition files.Access<div #gmap>: gmapElement is a reference to <div #gmap> inside app.component.html file.ViewChild directive creates a direct link between <div> element and a gmapElement member variable.ngOnInit():InsidengOnInit() life cycle hook, we shall create configuration object forGMap specifying default center, zoom level and map type.We shall pass this object to google.maps.Map constructor which shall returnnewMap object which we shall retain in member variable map for later access.Running application:Run application using ng serve and you should see GoogleMap inside browser.Congrats!!See, it was easy, told ya!PerformMap operations
BydefaultGoogleMap control shall render map as well as have few controls for changing zoom, full screen etc.You can access native GoogleMapsAPI via Angular.ChangeMap type

	<div class="col-md-3 col-sm-12 col-xs-12"><button(click)="setMapType('terrain')"class="btn btn-primary">Terrain</button><button(click)="setMapType('satellite')"class="btn btn-danger">Satellite</button><button(click)="setMapType('roadmap')"class="btn btn-warning">RoadMap</button></div>setMapType(mapTypeId: string)this.map.setMapTypeId(mapTypeId)We have map member variable inside our AppComponentclass.Usingthis variable, we can call native GMapAPIfor example, setMapTypeId.We have three buttons which pass map type ID to click handler to be passed to setMapTypeId function.NavigateMap via Latitude and LongitudeLet’s create a HTML form for user to enter Latitude and Longitude.<form class="form-inline" #form="ngForm"(ngSubmit)="setCenter($event)" ac><div class="form-group"><input type="text"class="form-control" name="latitude"[(ngModel)]="latitude" placeholder="Enter latitude" required></div><div class="form-group"><input type="text"class="form-control" name="longitude"[(ngModel)]="longitude" placeholder="Enter longitude" required></div><button type="submit"class="btn btn-primary"[disabled]="form.invalid">Go</button></form>Once user submit the form by entering Latitude and Longitude, we shall call native setCenter GMapAPI.Thisfunction takes object ofLatLng type hence we shall pass lat/long as a parameter to LatLng constructor.Notice e.preventDefault()function call.It is to avoid refreshing complete page on form submit.exportclassAppComponent
	  latitude:number;
	  longitude:number;setCenter(e:any)
		e.preventDefault();this.map.setCenter(newgoogle.maps.LatLng(this.latitude,this.longitude));

---

---

Utiliza Nuestro Buscador