GoogleMaps : Design Custom Price Marker

Question

I'm developing a mobile application using ionic and have a requirement to show places in google maps with price marker like this :

I wrote a very basic code to integrate google map with markers.

MapController

controller('MapController', function($scope, uiGmapGoogleMapApi, $log, $timeout, $state) {

    $scope.map = { center: { latitude: 12.9250, longitude: 77.5938 }, zoom: 8, window: { show: false } };
    $scope.options = { scrollwheel: false };

    $scope.markerEvents = {
        events: {
            dragend: function(marker, eventName, args) {
                var lat = marker.getPosition().lat();
                var lon = marker.getPosition().lng();
                $log.log(lat);
                $log.log(lon);

                $scope.marker.options = {
                    draggable: true,
                    labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,
                    labelAnchor: "100 0",
                    labelClass: "marker-labels"
                };
            }
        }
    };

    $scope.markers = [{

        id: 0,
        coords: {
            latitude: 12.8421,
            longitude: 77.6631
        },
        options: { draggable: false, icon: '',  labelClass: 'marker_labels', labelAnchor: '12 60', labelContent: '$400' }

    }, {
        id: 1,
        coords: {
            latitude: 12.1481,
            longitude: 77.5631
        },
          options: { draggable: false, icon: '',  labelClass: 'marker_labels', labelAnchor: '12 60', labelContent: '$600' }

    }, {
        id: 2,
        coords: {
            latitude: 12.3411,
            longitude: 77.4631
        },
          options: { draggable: false, icon: '',  labelClass: 'marker_labels', labelAnchor: '12 60', labelContent: '$550' }

    }, {
        id: 3,
        coords: {
            latitude: 12.5420,
            longitude: 77.3631
        },
          options: { draggable: false, icon: '',  labelClass: 'marker_labels', labelAnchor: '12 60', labelContent: '$900' }
    }];

HTML

<ion-view view-title="Maps">
    <ion-content class="padding">
        <div class="list">
            <ui-gmap-google-map center='map.center' zoom='map.zoom' draggable="true" options="options">
                <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="markerEvents.events" idkey="marker.id" click="onMarkerClick">
                </ui-gmap-marker>
            </ui-gmap-google-map>
        </div>
    </ion-content>
</ion-view>

Currently, I'm getting default marker icon which I want to hide and instead just show the price.

I've been searching long for clear information about the right way of implementing custom marker, but the result I get did not satisfied me.

So what should I do to implement this?

Skittle

What's your desired output? – Bodiless

@ZakariaAcharki The one which I showed in image..something like that – Skittle

So its not your case in picture? show us how yours looks like, and please add your code also. – Bodiless

@ZakariaAcharki I've added the code..and I want my maker to look same as I shown in image.. – Skittle

This answer worked for me: https://mcmap.net/q/303381/-google-maps-marker-label-with-multiple-characters – Tengler

Answer 1

By extending the google.maps.OverlayView class you can create and customise any marker using css/html. You can create your own directive for your custom marker that extends this class, for example this tutorial might help you.

Another option is to use different library for angularjs google maps, for example ng-map , which already contain support for custom markers.

Ge