At the moment I have the cordova Google maps plugin combined with Google search queries to initialize a map and add markers to each locations latitude and longitude.
To generate this map I’ve pretty much followed Josh Moronys tutorial.
I’m having some issues with gray section when the map is resized. The map div is styled with percentages.
#map {
width: 100%;
height: 100%;
}
<div #map id="map"></div>
I’ve also tried to implement the Google API’s resize function on mousedown on the map element but that doesn’t seem to work either.
google.maps.event.trigger(gmap, 'resize');
Here is the google maps provider that I’m using.
import { InfoWindow } from 'angular2-google-maps/core/services/google-maps-types';
import { Injectable } from '@angular/core';
import { ConnectivityService } from './connectivity-service';
import { Geolocation } from '@ionic-native/geolocation';
import { MarkerStyleRetro } from '../pages/marker/marker';
declare var google;
@Injectable()
export class GoogleMaps {
mapElement: any;
pleaseConnect: any;
map: any;
mapInitialised: boolean = false;
mapLoaded: any;
mapLoadedObserver: any;
markers: any = [];
styles: any = MarkerStyleRetro;
apiKey = "hidden"
constructor(public connectivityService: ConnectivityService, private geolocation: Geolocation) {
}
init(mapElement: any, pleaseConnect: any): Promise<any> {
this.mapElement = mapElement;
this.pleaseConnect = pleaseConnect;
return this.loadGoogleMaps();
}
// removeGoogleMaps(): void {
// console.log("removed");
// document.querySelector('#map').remove();
// }
loadGoogleMaps(): Promise<any> {
return new Promise((resolve) => {
if (typeof google == "undefined" || typeof google.maps == "undefined") {
console.log("Google maps JavaScript needs to be loaded.");
this.disableMap();
if (this.connectivityService.isOnline()) {
window['mapInit'] = () => {
this.initMap().then(() => {
resolve(true);
});
this.enableMap();
}
let script = document.createElement("script");
script.id = "googleMaps";
if (this.apiKey) {
script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
} else {
script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
}
console.log(script.src);
document.body.appendChild(script);
}
}
else {
if (this.connectivityService.isOnline()) {
this.initMap();
this.enableMap();
resolve(true);
}
else {
this.disableMap();
}
}
this.addConnectivityListeners();
});
}
initMap(): Promise<any> {
this.mapInitialised = true;
return new Promise((resolve) => {
this.geolocation.getCurrentPosition().then((position) => {
// UNCOMMENT FOR NORMAL USE
//let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: this.styles
}
this.map = new google.maps.Map(this.mapElement, mapOptions);
resolve(true);
});
});
}
resizeMap() {
console.log("lo")
google.maps.event.trigger(this.map, 'resize');
this.map.setZoom(this.map.getZoom());
}
disableMap(): void {
if (this.pleaseConnect) {
this.pleaseConnect.style.display = "block";
}
}
enableMap(): void {
if (this.pleaseConnect) {
this.pleaseConnect.style.display = "none";
}
}
addConnectivityListeners(): void {
document.addEventListener('online', () => {
console.log("online");
setTimeout(() => {
if (typeof google == "undefined" || typeof google.maps == "undefined") {
this.loadGoogleMaps();
}
else {
if (!this.mapInitialised) {
this.initMap();
}
this.enableMap();
}
}, 2000);
}, false);
document.addEventListener('offline', () => {
console.log("offline");
this.disableMap();
}, false);
}
resize() {
google.maps.event.trigger(this.mapElement, "resize");
}
addMarker(lat: number, lng: number, name: string, vicinity: any): void {
let resize = new google.maps.event.trigger(this.mapElement, "resize");
var infoContent = '<div id="iw-container">' +
'<div class="iw-title">' + name +
'<div class="iw-content">' +
'' +
'<p>' + vicinity + '</p>' +
'<br>' +
'</div>' +
'</div>';
let latLng = new google.maps.LatLng(lat, lng);
let infowindow = new google.maps.InfoWindow({
content: infoContent
});
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: latLng,
icon: {
url: './assets/images/coffee-cup.png',
size: new google.maps.Size(25, 25),
scaledSize: new google.maps.Size(25, 25),
}
});
marker.addListener('click', toggleBounce);
marker.addListener('click', info);
function info() {
infowindow.open(this.map, marker);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
this.markers = [];
this.markers.push(marker);
}
}
Map.ts file
import { Component, ElementRef, ViewChild, Injectable } from '@angular/core';
import { Locations } from '../../providers/locations';
import { GoogleMaps } from '../../providers/google-maps';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { LoadingController, IonicPage } from 'ionic-angular';
import { PlacesService } from '../../services/places.service';
@IonicPage()
@Component({
selector: 'page-about',
templateUrl: 'about.html',
})
@Injectable()
export class AboutPage {
@ViewChild('map') mapElement: ElementRef;
@ViewChild('pleaseConnect') pleaseConnect: ElementRef;
coords: string;
lat: any;
lng: any;
constructor(public navCtrl: NavController, public maps: GoogleMaps, public platform: Platform, public locations: Locations, private geolocation: Geolocation,
public loadingCtrl: LoadingController,
public placesService: PlacesService,
) {
let loader = this.loadingCtrl.create({
content: "Please wait...",
duration: 2000
});
loader.present();
}
ionViewDidEnter() {
this.platform.ready().then(() => {
let radius: string
let radiusCheck = this.placesService.getRadius();
Promise.all([radiusCheck]).then(function (value) {
radius = value[0];
}, function (reason) {
// rejection
});;
// get current position
this.geolocation.getCurrentPosition().then(pos => {
this.coords = pos.coords.latitude + ',' + pos.coords.longitude;
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
let mapLoaded = this.maps.init(this.mapElement.nativeElement, this.pleaseConnect.nativeElement);
let locationsLoaded = this.locations.load(this.lat, this.lng, radius);
Promise.all([
mapLoaded,
locationsLoaded
]).then((result) => {
let locations = result[1];
console.log(locations);
console.log(result);
for (let location of locations) {
this.maps.addMarker(location.geometry.location.lat, location.geometry.location.lng, location.name, location.vicinity);
}
});
});
});
}
}
I hope that enough information. I have a feeling its something CSS based but to be honest nothing has gone right for me so far when trying to change styles.