Forums
Thread
Jun 1, 2016
Angular2-google-maps : Is it possible to change origin code to style infoWindow and Markers?
I am currently working on a google maps implementation with angular2-google-maps.
Now I want to customize the infoWindow and markers. Is it possible (and how) to change the origin code from: https://github.com/SebastianM/angular2-google-maps
To customize the infoWindow and markers to the way I want to style them?
What I want to create is something like this:
And the number inside the circle is coming from the markerObject where I set the ID. So, it has to print html inside a marker. (or I just need to customize the original label to multiple number because now it only prints 0-9).
I haven't used Angular 2 nor Google Maps with it yet, but I'll try to give you some light into it:
For the marker you may use MarkerWithLabel, it will override the original marker with an element of your choice and the numbers can be defined based on the map markers' length.
About the infowindow style, I'm not sure you can do it, all I can help you with is substitute the original marker click to trigger your own custom infowindow, which would be just a regular
<div></div>, something like this:var mapOptions = { center: new google.maps.LatLng(-23.959942, -46.322279), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(-23.959942, -46.322279), map: map }); new google.maps.event.addListener(marker, 'click', function(marker) { // Toggle show/hide div });I could not test it, hope it helps (: