+ Reply to Thread
Results 1 to 9 of 9

Thread: Change marker of featured listing on search-on-map page?

  1. #1

    Change marker of featured listing on search-on-map page?

    Hi Flynax,

    How can I change the marker of featured listing on the map of search-on-map page. So it has the background color of featured listing?
    Please see picture

    marker.png

    I remembered there was a tutorial on this forum but now I can't find it anywhere?

  2. #2
    Guru
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    1,959
    marker-label.css.10


    .marker-label > span {
    background: #697a94;
    color: white;
    font-size: 13px;
    text-align: center;
    padding: 3px 6px;
    white-space: nowrap;
    font-weight: 400;
    border-radius: 3px;
    transform: translateY(-24px);
    Getting Started or Starting Over with Your Classified Site? then Get Ready Set Fly V 4.7.1 > quietSecrets.net

  3. #3
    Quote Originally Posted by Pete Young View Post
    marker-label.css.10


    .marker-label > span {
    background: #697a94;
    color: white;
    font-size: 13px;
    text-align: center;
    padding: 3px 6px;
    white-space: nowrap;
    font-weight: 400;
    border-radius: 3px;
    transform: translateY(-24px);
    Hi Pete,

    Thanks for the quick reply but I want to have 2 marker colors on the map of search on map page. One default as suggest above, and the one exclusive for the featured listing.

  4. #4
    Guru
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    1,959
    ok, understand, sorry for not reading right.
    Getting Started or Starting Over with Your Classified Site? then Get Ready Set Fly V 4.7.1 > quietSecrets.net

  5. #5
    Quote Originally Posted by Pete Young View Post
    ok, understand, sorry for not reading right.
    No problem Pete.

  6. #6
    From what I got from my backup 4.7.2, I need to add these code the templates/controllers/search_map/search_map.js

    add_class = listing.fd == '1' ? ' featured' : '';

    var featured_class = result.listings[i].fd == '1' && result.listings[i].gc == '1' ? ' featured' : '';

    // add/update marker
    if (!markers[listing_id]) {
    var marker = new MarkerWithLabel({
    position: myLatLng,
    map: map,
    labelContent: label,
    labelClass: 'map-price-marker' + featured_class,
    labelVisible: true,
    labelAnchor: new google.maps.Point(35, 29),
    zIndex: zIndex,
    icon: rlConfig['tpl_base'] + 'img/blank.gif',
    infobox: attacheInfo(result.listings[i]),
    flGc: result.listings[i].gc,
    flLat: result.listings[i].lat,
    flLng: result.listings[i].lng
    });

    markers[listing_id] = marker;


    var highlightListing = function(id, remove){
    if (!markers[id])
    return;

    // in claster
    if (markers[id].map == null) {
    var add_class = remove ? '' : ' active';
    var cluster = getCluster(markers[id]);

    if (cluster) {
    cluster.clusterIcon_.div_.className = 'cluster' + add_class;
    }
    }
    // marker itself
    else {
    var set_class = 'map-price-marker';

    if (markers[id].labelClass.indexOf('featured') >= 0) {
    set_class += ' featured';
    }

    if (!remove) {
    set_class += ' active';
    }

    // set highlighted class
    markers[id].labelClass = set_class;

    // manage zIndex
    placeOnTop(id, remove);

    // redraw marker, apply new settings
    markers[id].label.draw();
    }
    }

    But the structure of 4.8.1 is not the same as 4.7.2 so I have been scratching my head this whole morning. Please help. This actually make featured listing more attractive to customer. I really recommend that Flynax implement this by default.
    Last edited by Wei Hong; March 4, 2021 at 12:06 PM.

  7. #7
    Flynax developer Rudi's Avatar
    Join Date
    Dec 2014
    Location
    Planet Earth
    Posts
    1,975
    Hello Wei,

    go to libs > maps > map.js > this.addMarkers

    replace:
    Code:
    Only registered members can view the code.
    with:
    Code:
    Only registered members can view the code.
    then replace:
    Code:
    Only registered members can view the code.
    with:
    Code:
    Only registered members can view the code.

  8. #8
    Thanks Rudi,

    I have tried your code and it works great. Much appreciate it.

  9. #9
    Really cool, but I don't like to change code.

+ Reply to Thread