I'm using js-MarkerClusterer for creating clustered markers on my Map. I'm using API v3.
I've managed to create clusters:
new MarkerClusterer({
map: map,
markers: markers,
renderer: {
render: ({markers, _position: position}) => {
return new google.maps.Marker({
position: {
lat: position.lat(),
lng: position.lng(),
},
icon: '/assets/images/bitmap/cluster-marker.png',
label: String(markers.length),
color: '#fff'
});
},
},
});
Is there a way to change the label color? It is 'black' by default.
After a lot of searching, I found the sollution. It seems that label can be a object.
If fixed it by changing my label option to:
label: {
text: String(markers.length),
color: 'white'
},
Related
I have a list of array that contains latitudes and longitudes
locations = [
{ id: 1, lat: 1.4046821, lng: 103.8403383, name: location 1 }
{ id: 2, lat: 1.4410763, lng: 103.8059827, name: location 2 }
{ id: 3, lat: 1.3261783, lng: 103.8203441, name: location 3 }
];
Now, I want to display google maps foreach location using ionic ngFor
<div *ngFor="let location of locations">
<ion-card>
<div style="height: 250px; width: 100%" #mapCanvas id="map{{location.id}}"></div>
<ion-item>
<h2>{{location.name}}</h2>
</ion-item>
</ion-card>
</div>
Only the location name will display, but the map doesn't display
here's my .ts file
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController } from 'ionic-angular';
declare var google;
#Component({
selector: 'page-locations',
templateUrl: 'locations.html',
})
export class LocationsPage {
locations = [
{ id: 1, lat: 1.4046821, lng: 103.8403383, name: location 1 }
{ id: 2, lat: 1.4410763, lng: 103.8059827, name: location 2 }
{ id: 3, lat: 1.3261783, lng: 103.8203441, name: location 3 }
];
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(private navCtrl: NavController) {
}
loadMap(lat, lng) {
let latLng = new google.maps.LatLng(lat, lng);
let mapOptions = {
center: latLng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
}
}
But, I don't know how to reference or load a map to its corresponding div in ngFor.
I hope somebody can help me to display maps in ngFor
First : Id is unique by definition, use class instead, ViewChild is not appropriate in this case unless you loop on your HTML elements. What you can do is iterate your map.
To not waste your time : I am on mobile so I have some trouble to write text, hope you'll succeed to fix your problem. You can both use an id but you'll have to change it for each map or my class method so that you use the same class name all the time, if so :
EDIT with the solution that works :
http://weetrax.com/img/2maps.png
(did it here) https://www.w3schools.com/graphics/tryit.asp?filename=trymap_intro
<div class="googleMap" style="width:100%;height:400px;"></div>
<div class="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var maps = document.getElementsByClassName("googleMap");
var options= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
for (var i=0; i<maps.length; i++) {
console.log(maps[i]);
var map=new google.maps.Map(maps[i],options);
};
}
</script>
Here all the maps are inited as you can see on the picture ;)
I have to add a view with Google maps map on my project. I followed the official ionic native Google maps documentation but it does not work.
I assigned background color pink to the div that contains the map (for testing), before adding the map to the div, the div shows correctly. But when the map is added to the div the background of the modal window turns to transparent, and the div disappears. But no error is shown.
I tried different ways to attach the map on the div, but the results are the same.
When I use the code of the Ionic docs I got this error message "GoogleMaps [deprecated] Please use GoogleMaps.create()". I tried using GoogleMaps.create() instead of the argument of the constructor avoiding this error message, but still not working.
My ion-content:
<ion-content fullscreen overflow-scroll="true" class="container">
<div #map id="map"></div>
</ion-content>
Part of the css:
#map {
height: 90%;
width: 100%;
border-width: 5px;
border-color: red;
background: pink;
}
And here we got fragments of the ts:
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '#ionic-native/google-maps';
...
export class PerfilPage {
#ViewChild(Content) content: Content;
#ViewChild('map') mapElement: ElementRef;
map: GoogleMap;
...
ionViewDidLoad() {
// I use this for changing the nab-bar color
this.content.ionScroll.subscribe((scroll) => {
// console.log('user scrolled', scroll);
if ( scroll.scrollTop > 100 ) {
this.toolbar_color = "bg_search"
} else {
this.toolbar_color = "transparent"
}
this.ref.detectChanges();
});
// this.loadMap();
// this.initMap();
// this.testMap();
this.offiMap();
}
// Official Ionic documentation code
offiMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = this.googleMaps.create('map', mapOptions);
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('Map is ready!');
// Now you can use all methods safely.
this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
alert('clicked');
});
});
});
}
}
PS: the API key works on other projects (not Ionic projects), so idk where is the problem.
Thanks :)
As I describe on the git repo, the maps plugin places the native map view under (or behind) the browser.
https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work
That's why all parent elements of the map div becomes transparent.
If you need to set the background of application, you need to use Environment.setBackground("pink").
Since the map is displayed under the browser, this plugin CAN NOT display on dialogs.
loadMap() {
let element = document.getElementById('map');
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
let map: GoogleMap = this.googleMaps.create(element, mapOptions);
map.addMarker({
title: 'Location',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
//alert('clicked');
});
});
}
Try this
I had the exact issue as OP had when follow the Official Ionic Native Google Maps Guide
There's a misleading on the slide page Google Maps API Key. The URL in the slide is https://console.developers.google.com/projectselector/apis/library which is INCORRECT.
For generating Google Maps API Key for Android and IOS, we use Google Cloud Platforms https://cloud.google.com/maps-platform/
Here's the link I asked the same question Ionic3 ionic native google maps doesn't show map but only google logo (display grey blank map )
Hope it can help people who have the same issue.
I have an Ionic 3 app, using Google Maps. On load I am rendering a map with a Marker on the current user's location.
I am using watchPostion to update the marker when the user's position changes.
However, the marker keeps being set, even if the position does not change, it is added on top.
Also, when the position does change, the marker does not move, rather a new one is added, so I end up with a trail of markers.
I'd like to only add the maker if the position has changed and either remove / add the marker if it does, or simply have it's position updated.
This is my Ionic Component / Page -
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from '#ionic-native/geolocation';
import { MapStyle } from './map-style';
declare var google;
#Component({
selector: 'home-page',
templateUrl: 'home.html'
})
export class HomePage {
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(
public navCtrl: NavController,
public geolocation: Geolocation
) { }
ionViewDidEnter() {
this.initializeMap();
}
private initializeMap() {
const mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
styles: [...MapStyle]
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.geolocation.watchPosition()
.subscribe((position) => {
const geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
const currentUserMarker = new google.maps.Marker({
map: this.map,
position: geolocate,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8.5,
fillColor: "#2a929f",
fillOpacity: 0.4,
strokeWeight: 0.4
}
// content: `${position.coords.latitude} <br /> ${position.coords.longitude}`
});
this.map.panTo(geolocate);
currentUserMarker.setPosition(geolocate);
}, (err) => this.handleError)
}
private handleError(err) {
console.log(err);
}
}
Rookie mistake.
Every time watchPosition was called I created a new instance of the marker.
Declared marker higher in the scope and then wrapped my logic in an if / else.
if (this.marker != null) {
this.marker.setPosition(geolocate);
this.map.panTo(geolocate);
} else {
this.marker = new google.maps.Marker({
position: geolocate,
map: this.map,
............
I am using ember-cli-g-maps addon for ember v1.8.0 and although I have used the code listed in online guide, I can not get the marker to show up. I know it must be something simple my eyes are not seeing. The google map is showing up with no errors from the server or in the console. You can see the project at https://github.com/bhoskins/embergmaps.
This is the config/environment.js file:
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' *.googleapis.com maps.gstatic.com",
'font-src': "'self' fonts.gstatic.com",
'connect-src': "'self' maps.gstatic.com",
'img-src': "'self' *.googleapis.com maps.gstatic.com csi.gstatic.com",
'style-src': "'self' 'unsafe-inline' fonts.googleapis.com maps.gstatic.com"
},
This is the templates/map.hbs file:
<h1>Map</h1>
{{g-maps name="my-map" lat=lat lng=lng zoom=zoom scrollwheel=false}}
This is the routes/map.js file:
import Ember from 'ember';
/* global google */
export default Ember.Route.extend({
setupController: function(controller) {
controller.setProperties({
lat: 34.74048,
lng: -82.0463009,
zoom: 14,
markers: Ember.A([
{
id: 'McDonalds',
lat: 34.751603,
lng: -82.0463009,
address: '890 N Main St, Woodruff, SC 29388, USA',
infoWindow: { content: '<p>This is McDonalds</p>', visible: true },
anchorPoint: new google.maps.Point(),
animation: google.maps.Animation.DROP,
clickable: true,
crossOnDrag: true,
cursor: 'pointer',
draggable: true,
label: 'A',
opacity: 0.3,
optimized: true,
title: 'string',
visible: true,
zIndex: 999
}
])
});
}
});
What in the world am I missing?
Thanks
Duuuh, in the templates/map.hbs file you have to add markers=markers.
So it would read:
<h1>Map</h1>
{{g-maps name="my-map" lat=lat lng=lng zoom=zoom markers=markers}}
I hope someone can explain this to me. I have built a sencha touch 2.2.1 app and converted it to a native android app.
I have a map view that extends Ext.Map as shown below. When I remove that view, the app loads successfully on my mobile. When I integrate the view again, the mobile app first displays a white screen, then it displays the default sencha theme blue screen and stays there. Not even the loading indicator appears.
When the apk was tested in the emulator, everything works fine.
I included this line in index.html before using the map. I included it in the HEAD section. However in the sencha examples provided, it is included in the BODY section. Does it make any difference?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Here are my files:
Controller:
Ext.define('EntityApp.controller.Map', {
extend : 'Ext.app.Controller',
requires : 'Ext.device.Connection',
config : {
refs : {
map : '.mappanel'
},
control : {
map: {
initialize: 'initMap'
}
}
},
initMap: function () {
var me = this;
var gMap = me.getMap();
gMap.on('maprender', this.onMapRender, this, {single : true});
},
onMapRender: function(e) {
if (Ext.device.Connection.isOnline()) {
var latLngCoordinates = new google.maps.LatLng(<value>, <value>);
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMap().getMap()
});
this.getMap().getMap().setMapTypeId(google.maps.MapTypeId.ROADMAP);
this.getMap().setMapCenter(latLngCoordinates);
this.getMap().getMap().setZoom(17);
}
}
});
View:
Ext.define('EntityApp.view.Map', {
extend: 'Ext.Map',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Location'
},
mapOptions: {
center: !(window.google || {}).maps ? null : new google.maps.LatLng(<value>, <value>),
zoom: 17
}
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});
Even I'm also getting same error, I just add
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
tag after
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
in my index.html. It works fine. Try this.
I managed to solve the above by overriding the Ext.Map with my own data.
I also assigned a custom xtype called mymap and now I just do xtype:'mymap' and a map component loads with my custom data, as shown below:
Ext.define('App.view.Map', {
extend: 'Ext.Panel',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: [
{ docked: 'top', xtype: 'titlebar', title: 'Location' },
{ xtype: 'mymap' }
]
}
});
It seems that sencha processes the views data before the script tags in index.html. Correct me if I am wrong...