ejemplo de código de agm angular

Este team de expertos pasados algunos días de investigación y recopilación de de información, dieron con los datos necesarios, esperamos que resulte útil para ti para tu plan.

Ejemplo 1: mapas angulares de google

Step 1: Creating new project
Create a new project using command ng new gmaps-ng5
Step 2: Install Google Maps types for typescript support.
Run command npm install --save @types/googlemaps
Step 3: Link Google Maps JavaScript CDN inside index.html
<scriptsrc="http://maps.googleapis.com/maps/api/js">script>
NOTE: Make sure you put your Google Map API Key here. You can get one from `https://developers.google.com/maps/documentation/javascript/get-api-key`. If not, after free usage, Google Map will start showing watermark.
With above steps, you are all set to start working with Google Maps (GMap).
Step 4: Next, let’s add a placeholder <div> for GMap
<div#gmapstyle="width:100%;height:400px">div>
Step 5: Initialize GMap inside component

	import  ViewChild  from '@angular/core';
	import   from '@types/googlemaps';

	export class AppComponent   
	  @ViewChild('gmap') gmapElement: any;
	  map: google.maps.Map;

	  ngOnInit() 
		var mapProp = 
		  center: new google.maps.LatLng(18.5793, 73.8143),
		  zoom: 15,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		;
		this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
	  
	

Let’s break it down.
import   from '@types/googlemaps';

First we shall import Google Maps 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. Apart from 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(): Inside ngOnInit() life cycle hook, we shall create configuration object for GMap specifying default center, zoom level and map type. We shall pass this object to google.maps.Map constructor which shall return new Map object which we shall retain in member variable map for later access.
Running application:
Run application using ng serve and you should see Google Map inside browser. Congrats!! See, it was easy, told ya!
Perform Map operations
By default Google Map control shall render map as well as have few controls for changing zoom, full screen etc. You can access native Google Maps API via Angular.

Change Map type

	<divclass="col-md-3 col-sm-12 col-xs-12"><button(click)="setMapType('terrain')"class="btn btn-primary">Terrainbutton><button(click)="setMapType('satellite')"class="btn btn-danger">Satellitebutton><button(click)="setMapType('roadmap')"class="btn btn-warning">Road Mapbutton>div>
	
	setMapType(mapTypeId: string) 
		this.map.setMapTypeId(mapTypeId)    
	

We have map member variable inside our AppComponent class. Using this variable, we can call native GMap API for example, setMapTypeId. We have three buttons which pass map type ID to click handler to be passed to setMapTypeId function.
Navigate Map via Latitude and Longitude
Let’s create a HTML form for user to enter Latitude and Longitude.

	<formclass="form-inline"#form="ngForm"(ngSubmit)="setCenter($event)"ac><divclass="form-group"><inputtype="text"class="form-control"name="latitude"[(ngModel)]="latitude"placeholder="Enter latitude"required>div><divclass="form-group"><inputtype="text"class="form-control"name="longitude"[(ngModel)]="longitude"placeholder="Enter longitude"required>div><buttontype="submit"class="btn btn-primary"[disabled]="form.invalid">Gobutton>form>

Once user submit the form by entering Latitude and Longitude, we shall call native setCenter GMap API. This function takes object of LatLng 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.

	export class AppComponent 
	  latitude:number;
	  longitude:number;

	  setCenter(e:any)
		e.preventDefault();
		this.map.setCenter(new google.maps.LatLng(this.latitude, this.longitude));
	  
	

Ejemplo 2: agm angular

npm install @agm/core

// on your module
import  AgmCoreModule  from '@agm/core';

imports: [
    AgmCoreModule.forRoot(
      apiKey: ''  // create a Google API Key and enable "Maps JavaScript API" for that API
    )
  ]

// on you component
  title = 'My first AGM project';
  lat = 51.678418;
  lng = 7.809007;

// on your html
<agm-map[latitude]="lat"[longitude]="lng"style="height:150px"><agm-marker[latitude]="lat"[longitude]="lng">agm-marker>agm-map>

Te mostramos las comentarios y valoraciones de los usuarios

Si haces scroll puedes encontrar los comentarios de otros sys admins, tú incluso tienes el poder dejar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador