0

lwcPropertiesMap.html

<template>
    <div class="slds-m-around_medium">
        <h1 class="slds-text-heading_small">Multiple Markers</h1>
        <p class="slds-text-body_regular">Multiple markers are displayed on the map. Map is centered on geometric mean of markers and zoom is calculated automatically to fit all markers in viewport.</p>
    </div>

    <p>Selected Marker Value is {selectedMarkerValue}</p>
    <lightning-map
        map-markers={mapMarkers}
        onmarkerselect={handleMarkerSelect}
        selected-marker-value={selectedMarkerValue} >
    </lightning-map>
</template>

lwcPropertiesMap.js

import { LightningElement, track, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import getPropertyList from '@salesforce/apex/MyPropertyController.getPropertyList'
import { registerListener, unregisterAllListeners, fireEvent } from 'c/pubsub';
export default class LwcPropertiesMap extends LightningElement {

    searchKey   = '';
    maxPrice    = 9999999;
    bedrooms    = 0;
    bathrooms   = 0;

    @wire(CurrentPageReference) pageRef;
    @wire(getPropertyList, {
        searchKey   : '$searchKey',
        maxPrice    : '$maxPrice',
        bedrooms    : '$bedrooms',
        bathrooms   : '$bathrooms'
    })
    propertyMarkers;
    @track
    mapMarkers = propertyMarkers.map(function (property) {

        return ({
            location: {
                    City    : property.City__c,
                    State   : property.State__c
            },
            title       : property.Name,
            description : property.Description__c,
            value       : property.Id
         })
    });
    @track selectedMarkerValue = '';
    handleMarkerSelect(event) {
        this.selectedMarkerValue = event.detail.selectedMarkerValue;
        console.log('handle marker select'+this.selectedMarkerValue);
        fireEvent(this.pageRef,'dreamHousePropertiesMapEvent',this.selectedMarkerValue);
    }
}
  • have you tried with mapMarkers = this.propertyMarkers.map(...? (missing this.). I'm assuming you are assigning the propertyMarkers variable somewhere else. – Sergio Alcocer Apr 29 at 21:28
  • No, I'm not assigning propertyMarkers variable anywhere else. I have tried by attaching this. also and a new error came saying cannot read property map of undefined. – HG_ Apr 30 at 5:13
  • Can you make propertyMarkers = ''; when you are initially defining it – Manish Anand Apr 30 at 5:17
  • propertyMarkers is a wired property, what is the concept of initializing it like propertyMarkers='';. It will throw an error as we can't call map() on a string. – HG_ Apr 30 at 6:37
  • propertyMarkers; is treated as undefined and propertyMarkers=''; will be treated as null and null is an object in javascript and you can access attribute (map) of an object (null in this case) , but when you try to access attribute of undefined , it throws the error – Manish Anand May 3 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.