< script src ="https://maps.googleapis.com/maps/api/js?key=KEY "> </ script >
2 Create div in html and declare
loadMap ( ) {
// create a new map by passing HTMLElement
const mapEle : HTMLElement = document . getElementById ( 'map' ) ;
// create LatLng object
const myLatLng = { lat : 4.658383846282959 , lng : - 74.09394073486328 } ;
// create map
this . map = new google . maps . Map ( mapEle , {
center : myLatLng ,
zoom : 12
} ) ;
google . maps . event . addListenerOnce ( this . map , 'idle' , ( ) => {
this . renderMarkers ( ) ;
mapEle . classList . add ( 'show-map' ) ;
} ) ;
}
ion-content {
# map {
width : 100% ;
height : 100% ;
opacity : 0 ;
transition : opacity 150ms ease-in;
display : block;
& .show-map {
opacity : 1 ;
}
}
}
interface Marker {
position : {
lat : number ,
lng : number ,
} ;
title : string ;
}
addMarker ( marker : Marker ) {
return new google . maps . Marker ( {
position : marker . position ,
map : this . map ,
title : marker . title
} ) ;
}
markers: Marker [ ] = [
{
position : {
lat : 4.658383846282959 ,
lng : - 74.09394073486328 ,
} ,
title : 'Parque Simón Bolivar'
} ,
{
position : {
lat : 4.667945861816406 ,
lng : - 74.09964752197266 ,
} ,
title : 'Jardín Botánico'
} ,
{
position : {
lat : 4.676802158355713 ,
lng : - 74.04825592041016 ,
} ,
title : 'Parque la 93'
} ,
{
position : {
lat : 4.6554284 ,
lng : - 74.1094989 ,
} ,
title : 'Maloka'
} ,
] ;
renderMarkers ( ) {
this . markers . forEach ( marker => {
this . addMarker ( marker ) ;
} ) ;
}
import { Component , OnInit } from '@angular/core' ;
declare var google ;
interface Marker {
position : {
lat : number ,
lng : number ,
} ;
title : string ;
}
@Component ( {
selector : 'app-home' ,
templateUrl : 'home.page.html' ,
styleUrls : [ 'home.page.scss' ] ,
} )
export class HomePage implements OnInit {
map = null ;
markers : Marker [ ] = [
{
position : {
lat : 4.658383846282959 ,
lng : - 74.09394073486328 ,
} ,
title : 'Parque Simón Bolivar'
} ,
{
position : {
lat : 4.667945861816406 ,
lng : - 74.09964752197266 ,
} ,
title : 'Jardín Botánico'
} ,
{
position : {
lat : 4.676802158355713 ,
lng : - 74.04825592041016 ,
} ,
title : 'Parque la 93'
} ,
{
position : {
lat : 4.6554284 ,
lng : - 74.1094989 ,
} ,
title : 'Maloka'
} ,
] ;
constructor ( ) { }
ngOnInit ( ) {
this . loadMap ( ) ;
}
loadMap ( ) {
// create a new map by passing HTMLElement
const mapEle : HTMLElement = document . getElementById ( 'map' ) ;
// create LatLng object
const myLatLng = { lat : 4.658383846282959 , lng : - 74.09394073486328 } ;
// create map
this . map = new google . maps . Map ( mapEle , {
center : myLatLng ,
zoom : 12
} ) ;
google . maps . event . addListenerOnce ( this . map , 'idle' , ( ) => {
this . renderMarkers ( ) ;
mapEle . classList . add ( 'show-map' ) ;
} ) ;
}
renderMarkers ( ) {
this . markers . forEach ( marker => {
this . addMarker ( marker ) ;
} ) ;
}
addMarker ( marker : Marker ) {
return new google . maps . Marker ( {
position : marker . position ,
map : this . map ,
title : marker . title
} ) ;
}
}