ultrasonicsoft / googlemaps-angular6 Goto Github PK

Hi,
I have added js file manually by downloading because I was getting "google not defined" error. But because to pass the api key i have to pass <script async defer src="https://maps.googleapis.com/maps/api/js?key=my_key">
</script> in index.html. So I get the error "you have included javascript api multiple times in this page error". Is there any other way I can pass the key than calling the api ?

Hi,

I have followed as carefully as possible your instructions to install gmap-ng5 unfortunately I keep getting the error ERROR ReferenceError: google is not defined in the browser's console.

Here is an abstract of my package.json:

"dependencies": {
    "@angular/animations": "^5.2.7",
    "@angular/cdk": "^5.2.3",
    "@angular/common": "^5.2.7",
    "@angular/compiler": "^5.2.7",
    "@angular/core": "^5.2.7",
    "@angular/forms": "^5.2.7",
    "@angular/http": "^5.2.7",
    "@angular/material": "^5.2.3",
    "@angular/platform-browser": "^5.2.7",
    "@angular/platform-browser-dynamic": "^5.2.7",
    "@angular/router": "^5.2.7",
    "@ngrx/effects": "^4.1.1",
    "@ngrx/router-store": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "@types/googlemaps": "^3.30.7",
    "core-js": "^2.4.1",
    "lodash.clonedeep": "^4.5.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20"
  }

The import is present in the app.module.ts as:
import { } from '@types/googlemaps';

And here is the code in the index.html:

import { Component, OnInit, ViewChild  } from '@angular/core';
import { } from '@types/googlemaps';

@Component({
  selector: 'app-airports-home',
  templateUrl: './airports-home.component.html',
  styleUrls: ['./airports-home.component.scss']
})
export class AirportsHomeComponent implements OnInit {

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

  latitude:number;
  longitude:number;


  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);
  }

  setMapType(mapTypeId: string) {
    this.map.setMapTypeId(mapTypeId)    
  }

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

}

Could you please help me to investigate this issue?
I was also wondering about the API key... How does it work?

error TS2307: Cannot find module '@type/googlemaps'.

Do you have any example related to autocomplete search while entering details in field for google map?

Hi Balram,
I am using agm/core for implementing google maps in my application. I have a service in which I have a getAddress method which inputs lat and lng and tries to converts it to the address.
And this is the code for it.
import { } from '@types/googlemaps';
declare const google: any;
public getAddress(lat, lng) {

const latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};
const geocoder = new google.maps.Geocoder();
geocoder.geocode({'location': latlng}, function(results, status) {
        this.address = results[0].formatted_address;
  });

  return this.address;


}

In that, I get google is not found error.

Any help is appericiated.

I want to explore on filter option on the basis of rating and hour in google map search.I have explored a lot in this content but didn't get any success.
Please let me know some helpful guidance through your experience on this content.

google map is working very well inside the component but some how its not working inside ng-bootstrap modal. please suggest what to do in this case

Is there any way where we can hide map when page loads and only shows while clicking on toggle button.

ERROR ReferenceError: google is not defined
at MapComponent.push../src/app/components/map/map.component.ts.MapComponent.ngOnInit (map.component.ts:15)

Hi

I gotr the following error when I start the project :

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: Error: Cannot find module 'cuint'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object. (E:\home\dev\angular\gmap-angular5\gmap-ng5\node_modules\xxhashjs\lib\xxhash.js:7:14)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object. (E:\home\dev\angular\gmap-angular5\gmap-ng5\node_modules\xxhashjs\lib\index.js:2:7)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
@ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-131
@ multi ./src/styles.css ./node_modules/bootstrap/dist/css/bootstrap.min.css

Trying to implementing autocomplete search bar with this google map and got success but when giving radius option on same search to change radius according to chosen distance(miles) from dropdown, it's not working.
let me know if you can help me in this.

Can you please let me know how to style the cluster with our own styles like the size of the cluster should be bigger based on the number of markers in it. Each cluster should have to custom style injected from code.

Is any one know how to use setContextMenu in angular 6 ?

Im declaring a custom style to my map as follows:

 var mapProp = {
      zoom: 14,
      center: myLatLng,      
      styles: [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]

    }

    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

The map works correctly and displays the style but when compiling I'm getting the following error
ERROR in src/app/component/home/home.component.ts(52,68): error TS2345: Argument of type '{ zoom: number; center: LatLng; styles: ({ "featureType": string; "elementType": string; "stylers...' is not assignable to parameter of type 'MapOptions'. Types of property 'styles' are incompatible. Type '({ "featureType": string; "elementType": string; "stylers": ({ "visibility": string; } | { "hue":...' is not assignable to type 'MapTypeStyle[]'. Type '{ "featureType": string; "elementType": string; "stylers": ({ "visibility": string; } | { "hue": ...' is not assignable to type 'MapTypeStyle'. Type '{ "featureType": string; "elementType": string; "stylers": ({ "visibility": string; } | { "hue": ...' is not assignable to type 'MapTypeStyle'. Types of property 'elementType' are incompatible. Type 'string' is not assignable to type '"all" | "geometry" | "geometry.fill" | "geometry.stroke" | "labels" | "labels.icon" | "labels.tex...

Any ideas as why this is happening?

Please let me know how can I use google maps in angular 4. I tried using the command "npm install — save @types/googlemaps", but nothing is getting installed.

I get the error, Can't find variable: google in my browser console when the page auto-reloads after making a save, however when I reload the page in the browser manually, it usually loads fine, but not always.

Could this mean that it's trying to run the script before it's loaded the js?

This is my code;

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

and then inside ngOnInit() {, I assign the lat/long to a variable, the styles, the marker image, and then the following:

var mapProp = new google.maps.Map(this.gmapElement.nativeElement, {
      zoom: 15,
      center: myPosition,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: myMapStyles
    });

    var marker = new google.maps.Marker({
      position: myPosition,
      map: mapProp,
      icon: mapMarkerImage,
      title: 'Temporary Title'
    });

    var contentString = '<h3 class="sectiontitle fc-darkshade">Temporary popup title</h3>'+
      '<div class="fc-darkshade">'+
      '<p>Some details here or address?</p>'+
      '</div>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    marker.addListener('click', function() {
      infowindow.open(mapProp, marker);
    });

Any help is appreciated

Hi Balram,

I tried following your example down and copied it verbatim and followed all of the debugging issues everyone in the commenting section had, but I'm running into a pesky issue no one else has reported and I'm wondering if you might know what it is stemming from. Its coming from the last line of the app component in the ngOnInit method.

I have to implement hide and show on map with click of a button.please help me in this scenario.

Hello,
In your sample project I have the following error message (app.component.ts)

How can I fix it?
IDE: VS Code
Thank you.

Thanks for your great work, will those work without an API key, how did u manage to do that
.

Can we get npm installables for maps.googleapis.com/maps/api/js

Everything is working fine but getting the error in the console as

ERROR ReferenceError: google is not defined

and It is taking time to show the map (around 10-15 sec). Is there any solution to rectify it ?