marker labels about angular-google-maps HOT 27 CLOSED

heres a workaround , from google maps api documentation, the label can either be a string or a MarkerLabel object specification , so instead of using string for label specify the MarkerLabel object and feed it in as a variable eg
` let markerLabelObject={
color:"red",
fontFamily:"monospace",
fontSize:"13",
fontWeight:"100",
text:element.names

     }

    this.markers.push({
      lat: element.latitude,
      label:markerLabelObject,
      lng: element.longitude,`

from angular-google-maps.

Added pull request with this functionality
#1392

from angular-google-maps.

@ssypi I think it is not possible right now with the given feature set. Can you provide some code snippets of this? Then we can think about how this can be solved

from angular-google-maps.

I am also researching this, furthermore changing the pin icon!!!

from angular-google-maps.

@SebastianM I haven't had enough time yet to delve deeper into this issue, but one possibility would be to use the markerwithlabel from google-maps-utility-library (sources and docs/examples) or this fork. At a quick glance it seems rather simple to use, though it does need a reference to the map.

from angular-google-maps.

@brian-singer the pin icon can be changed by setting the iconUrl property in the marker directive https://angular-maps.com/docs/api/latest/ts/core/SebmGoogleMapMarker-directive.html

from angular-google-maps.

Right, iconUrl did the trick. @alexweber thanks

from angular-google-maps.

InfoWindow can't be styled, if you need custom info window, google maps infobox plugin should be used.
https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js

Implementation in my project:

Also, to style marker and add custom label, "markerwithlabel" google maps library should be used.
https://github.com/googlemaps/v3-utility-library/blob/master/markerwithlabel/src/markerwithlabel.js

Have implemented this on angular1 and native google maps, but I don't know how to implement same logic with angular2 and this plugin. Or I should use googlemaps api directly as in angular1 ?

from angular-google-maps.

@ddctd143 You can probably achieve this using a custom component/directive placed inside the map or marker component like mentioned here: #307 (comment)

from angular-google-maps.

I've integrated the above solution in a Plunkr for the Styled Map:

https://plnkr.co/edit/rv6udUOEedMxJejEpIW1

But I have yet to figure out to do the same for the marker, as I also need the label with it. When I use styled-marker directive I don't know if I can get the marker instance.

from angular-google-maps.

@alexjeen Can you post your problem on stackoverflow ? Some months ago I have rewritten my code to work with this library and google maps. I would answer your question.

from angular-google-maps.

Thanks in advance:
http://stackoverflow.com/questions/40087258/angular2-google-maps-style-marker

from angular-google-maps.

I am trying to implement MarkerWithLabel following @ddctd143 answer in stackoverflow but getting google not defined error on markerwithlabel.js. Does anyone know how to fix this?

from angular-google-maps.

@bibr You should import it as a <script></script> from bower

Example:

<script src="bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js"></script>

And to install it with bower use:

"google-maps-utility-library-v3-markerwithlabel": "^1.1.10"

from angular-google-maps.

@ddctd143 Is it any difference than this

<script src="assets/markerwithlabel.js"></script>

Do I have to use bower?

Seems like this script is loaded before map. which throws the error. Am I missing something here?

from angular-google-maps.

@bibr

Google maps should go before.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
<script src="bower_components/google-maps-utility-library-v3-markerwithlabel/dist/markerwithlabel.js"></script>

from angular-google-maps.

@ddctd143

Then it will throw
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
since google map is already loaded by angular2-google-maps

from angular-google-maps.

@bibr were you ever able to get this working?

from angular-google-maps.

@ryan-morris yes, I need to load the map before marker.js so in index.html I have added this

window.onload = function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'assets/js/marker.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }

from angular-google-maps.

@bibr @ddctd143 Getting error Zone: angular ; Task: Promise.then ; Value: ReferenceError: MarkerWithLabel is not defined when I'm using new MarkerWithLabel. Any ideas into how I can solve this?
`import { Directive, OnInit } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import "../scripts/markerwithlabel.js";

declare const MarkerWithLabel:any;

@directive({
selector: 'markerlabel-directive'
})

export class MarkerLabelDirective implements OnInit {

private map: any;
constructor(private gmapsApi: GoogleMapsAPIWrapper) {}
ngOnInit() {
this.gmapsApi.getNativeMap().then(map => {
  // instance of the map.
  this.map = map;
  this.initMap();
});

}

initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

 var marker1 = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 0.75}
 });

 var marker2 = new MarkerWithLabel({
   position: new google.maps.LatLng(49.475, -123.84),
   draggable: true,
   raiseOnDrag: true,
   map: this.map,
   labelContent: "$395K",
   labelAnchor: new google.maps.Point(22, 0),
   labelStyle: {opacity: 1.0}
 });

 var iw1 = new google.maps.InfoWindow({
   content: "Home For Sale"
 });
 var iw2 = new google.maps.InfoWindow({
   content: "Another Home For Sale"
 });
 google.maps.event.addListener(marker1, "click", function (e) { iw1.open(this.map, this); });
 google.maps.event.addListener(marker2, "click", function (e) { iw2.open(this.map, this); });

}
}`

from angular-google-maps.

any updates?

from angular-google-maps.

Yes please. MarkerWithLabel seems to be the way to go.
https://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters

@nelsonBlack Does the size of the marker increase for you? It doesn't for me, so it isn't very helpful.

from angular-google-maps.

@Ammueliza did you get it to work?

from angular-google-maps.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from angular-google-maps.

I tried to implement this now and failed. Either I get something wrong or this isn't part of the latest release (1.0.0-beta.5)?
ERROR in : Can't bind to 'markerWithLabel' since it isn't a known property of 'agm-marker'.
As far as I understand the code in the PR I need to set this to 'true'.

I tried with:
Angular 7 (not officially supported by the latest release yet)
@agm/[email protected]
[email protected]

Can someone tell me how to get this to work please?

from angular-google-maps.

@pueaau Was trying to get this working but the paths are all jacked up https://www.npmjs.com/package/@ajqua/marker-with-label

Created a new repo with the correct paths
https://github.com/braxtondiggs/marker-with-label

from angular-google-maps.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from angular-google-maps.