मैं एक कोणीय 2 घटक के अंदर गूगल मैप्स एपीआई एकीकृत कर सकते हैं

मैं एक कोणीय 2 घटक है कि इस तरह इस तरह से फ़ाइल comp.ts में परिभाषित किया गया है है:मैं एक कोणीय 2 घटक के अंदर गूगल मैप्स एपीआई एकीकृत कर सकते हैं

import {Component} from 'angular2/core'; 

@component({ 
    selector:'my-comp', 
    templateUrl:'comp.html' 
}) 

export class MyComp{ 
    constructor(){ 
    } 
}

क्योंकि मैं दिखाने के लिए घटक चाहते हैं एक गूगल मानचित्र, मैं निम्नलिखित कोड comp.html फ़ाइल में डाला है:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script> 
function initialize() { 
    var mapProp = { 
    center:new google.maps.LatLng(51.508742,-0.120850), 
    zoom:5, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
<div id="googleMap" style="width:500px;height:380px;"></div> 
</body> 

</html>

इस कोड को इस लिंक http://www.w3schools.com/googleAPI/google_maps_basic.asp से कॉपी किया गया है। समस्या यह है कि घटक मानचित्र नहीं दिखाता है। मैंने क्या गल्त किया है?

स्रोत

2016-05-19 nix86

मुझे एक समाधान मिला है। सबसे पहले, निम्न पंक्ति:

<script src="http://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>

index.html फ़ाइल में डाला जाना चाहिए। कोड बनाता है जो कोड comp.ts फ़ाइल में डाला जाना चाहिए। विशेष रूप से, इसे एक विशेष विधि, अर्थात् "ngOnInit" में डाला जाना चाहिए, जिसे कक्षा के निर्माता के बाद रखा जा सकता है।

import { Component } from 'angular2/core'; 

declare const google: any; 

@Component({ 
    selector: 'my-app', 
    templateUrl:'appHtml/app.html', 
    styleUrls: ['css/app.css'] 
}) 

export class AppMainComponent { 
    constructor() {} 
    ngOnInit() { 
     let mapProp = { 
      center: new google.maps.LatLng(51.508742, -0.120850), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     let map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
    } 
}

अंत में, आईडी "googlemap" के साथ div, जो गूगल मानचित्र शामिल करने के लिए जा रहा है, comp.html फ़ाइल में डाला जाना चाहिए, जो इस तरह दिखेगा:

यह comp.ts है

<body> 
    <div id="googleMap" style="width:500px;height:380px;"></div> 
</body>

स्रोत

2016-05-20 12:44:36 nix86

आप तत्व आप अपने नक्शे अपने घटक के एचटीएमएल टेम्पलेट में प्रदर्शित करना चाहते हैं रखना चाहिए। सिर्फ स्पष्टीकरण के लिए। आपके पास आमतौर पर आपके टेम्पलेट में बॉडी टैग नहीं होते हैं। – thomi

इस तरह का समाधान कोणीय 5.x पर भी काम करता है। महान जवाब, धन्यवाद! यदि आप उस संस्करण में इसका उपयोग करते हैं, तो आपको 'npm इंस्टॉल @ प्रकार/googlemaps --save' की आवश्यकता हो सकती है। – tkhm

हाँ, आप ऐसा कर सकते हैं। लेकिन टाइपस्क्रिप्ट कंपाइलर में एक त्रुटि होगी, इसलिए Google चर को स्पष्ट रूप से घोषित करना न भूलें।

declare var google: any;

घटक आयात के बाद यह निर्देश जोड़ें।

import { Component, OnInit } from '@angular/core'; 
declare var google: any; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    ngOnInit() { 
    var mapProp = { 
      center: new google.maps.LatLng(51.508742, -0.120850), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("gmap"), mapProp); 
    } 
}

स्रोत

2016-08-07 09:33:57

ngOnInit ने मुझे getElementById समस्या का समाधान करने में मदद की, धन्यवाद! Google var घोषणा के रूप में, मैं [gmaps typings] का उपयोग करने का सुझाव देता हूं (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/googlemaps/google.maps.d.ts) यह वास्तव में अच्छी तरह से मदद करता है – youssef

-4

उपयोग angular2-google-नक्शे: https://angular-maps.com/

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule, ApplicationRef } from '@angular/core'; 

import { AgmCoreModule } from 'angular2-google-maps/core'; 

@Component({ 
    selector: 'app-root', 
    styles: [` 
     .sebm-google-map-container { 
      height: 300px; 
     } 
    `], 
    template: ` 
     <sebm-google-map [latitude]="lat" [longitude]="lng"></sebm-google-map> 
    ` 
}) 
export class AppComponent { 
    lat: number = 51.678418; 
    lng: number = 7.809007; 
} 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    AgmCoreModule.forRoot({ 
     apiKey: 'YOUR_GOOGLE_MAPS_API_KEY' 
    }) 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {}

स्रोत

2016-11-18 01:35:32 nisenish

मैं एक कोणीय 2 घटक के अंदर गूगल मैप्स एपीआई एकीकृत कर सकते हैं

उत्तर

संबंधित मुद्दे