@NoahTanenholtz1 wrote:
I have tried to use many outside sources to correctly use the Google Places API and the Places Search Query to drop markers at all locations of a keyword, (like a chain restaurant name). However, the places API is not correctly working and there are no markers showing. My code is below and should work correctly.
map.html:
<ion-header> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=AIzaSyDkfJoNyJ8gtWKCgZC_rM2GJHWG5l5AZM4&libraries=places"> </script> <ion-navbar> <ion-title> Map </ion-title> </ion-navbar> </ion-header> <body>map.ts:
import { Component, ViewChild } from '@angular/core'; import { NavController, Platform, Navbar } from 'ionic-angular'; import { GoogleMaps, GoogleMapsEvent, GoogleMapOptions, MarkerOptions, Marker, LocationService, MyLocation, CameraPosition, LatLng } from '@ionic-native/google-maps'; import { googlemaps } from "googlemaps"; import { NativePageTransitions, NativeTransitionOptions } from '@ionic- native/native-page-transitions'; @Component({ selector: 'page-map', templateUrl: 'map.html', }) export class Map { @ViewChild(Navbar) navBar: Navbar; map: any; latLng:any; mapOptions:any; infowindow: any; service:any; constructor(private navCtrl: NavController, private platform: Platform, private nativePageTransitions: NativePageTransitions) {} ionViewDidLoad() { this.navBar.backButtonClick = (e:UIEvent)=>{ this.navCtrl.pop({animate: true, animation: "transition", direction: "left", duration: 300}); }; } ionViewWillLeave() { let options: NativeTransitionOptions = { direction: 'left', duration: 300, slowdownfactor: 3, slidePixels: 20, iosdelay: 100, androiddelay: 150, fixedPixelsTop: 0, fixedPixelsBottom: 60 }; this.nativePageTransitions.slide(options) .then(onSuccess) .catch(onError); } ionViewDidEnter() { this.platform.ready().then(() => { this.loadMap(); }); } locationClick() { LocationService.getMyLocation().then((myLocation: MyLocation) => { this.map.animateCamera({ target: myLocation.latLng, zoom: 17, duration: 1000 }); }); } loadMap() { LocationService.getMyLocation().then((myLocation: MyLocation) => { let mapOptions: GoogleMapOptions = { camera: { target: myLocation.latLng, zoom: 10, tilt: 30 }, controls: { 'compass': true, 'myLocationButton': false, 'myLocation': true, // (blue dot) 'zoom': false, 'indoorPicker': true, 'mapToolbar': true // android only }, preferences: { zoom: { minZoom: 10, maxZoom: 18 } }, building: true, }; // Create a map after the view is loaded. // (platform is already ready in app.component.ts) this.map = GoogleMaps.create('map', mapOptions); }); var request = { query: 'McDonalds', fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry'], }; this.service = new google.maps.places.PlacesService(this.map); this.service.findPlaceFromQuery(request, callback); function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { this.createMarker(results[i]); } } } } createMarker(place) { var placeLoc = place.geometry.location; this.map.addMarker({ position: place.geometry.location, title: "Hello GoogleMap for Cordova!", animation: google.maps.Animation.DROP, }, function(marker) { marker.setMap(this.map); marker.showInfoWindow(); }); } }index.html:
!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Ionic App</title> <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#4e8ef7"> <!-- add to homescreen for ios --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <script src="http://maps.google.com/maps/api/js?key=AIzaSyDkfJoNyJ8gtWKCgZC_rM2GJHWG5l5AZM4&libraries=places"></script> <script src="cordova.js"></script> <!-- un-comment this code to enable service worker <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.error('Error', err)); } </script>--> <link href="build/main.css" rel="stylesheet"> </head> <body> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBETjLLPvUrAI9CUsDLha4iPqsMU4UJpWo&libraries=places"></script> <!-- Ionic's root component and where the app will load --> <ion-app></ion-app> <!-- The polyfills js is generated during the build process --> <script src="build/polyfills.js"></script> <!-- The vendor js is generated during the build process It contains all of the dependencies in node_modules --> <script src="build/vendor.js"></script> <!-- The main bundle js is generated during the build process --> <script src="build/main.js"></script> </body> </html>
Posts: 1
Participants: 1