WP Residence Help WP Residence Help

  • WpEstate
  • How to Build Your Website
  • Video Tutorials
  • Client Support
  • API
Home / Technical how to | Custom Code Required / Technical how to : Add extra information into infobox (the images on the map)

Technical how to : Add extra information into infobox (the images on the map)

3666 views 2

This task is very complex and should be tried only by the persons that are fluent in php and javascript.

In a few words (process is explained in reverse order here)

You add infobox  data (image, text etc) by using properties attached to the actual marker. So the data you want to be inserted into infobox must first be “attached” to the marker.

You attach the data to the marked when you create it

The data you need to be attached to the marked is received via an json object created .

The json object is created in php .

 

 

The detailed explanations 

The json onject that have all the listing details  is generated   via wpestate_listing_pins() that calls wpestate_pin_unit_creation() function from pin_managment.php . If you want to add extra info you need to make sure you user rawurlencode like in this line

$place_markers[] = rawurlencode(get_the_post_thumbnail($the_id,'widget_thumb') );

Note here that this code has a index of 18
$place_markers[] = rawurlencode($pin_price);

Add the new info after this line and note that later in js you will need to use index no 19.

After you get all  the info in $markers array we apply the json_encode function.

 

The pins data is then  attached to googlecode_regular_vars  in css_js_include.php around line 475 (to be used in google_map_code.js file)

'markers'           =>  $json_string,

 

In maps_base.js file we have the function wpresidence_google_setMarkers2 that will place markers on the map
get the new info like this
var pin_price = decodeURIComponent ( beach[17] );

replace 17 with your new index – probably 19.

 
The marker is created in wpestate_createMarker (js/mapfunctions.js line 792). The new info will have to be sent as a new parameter, and then used in the function code as a new marker property. For price maker, add it around line 834 , for classic marker add it around line 860.

 

The infobox (the listing image over the map when you click a pin) is created in javascript when you click on the pin. This is done in mapfunctions.js around line 335 via

google.maps.event.addListener(marker, 'click', function(event) {

 

The actual information that is display inside that infobox (image., title, price etc) is added at line 941 in mapfunctions.js. You will have to send the extra info to the function wpestate_generate_infobox, and edit the html code in there in order to add it.


infoBox.setContent( wpestate_generate_infobox(infobox_class,title,link,info_image,price,cleanprice,infosize,infobaths,inforooms));

Technical how to | Custom Code Required

Related Articles

  • Technical – How to Change the Minimum Image Dimensions for Property Uploads in WPResidence
  • Introduction to WPResidence Header Customization
  • Understanding WPResidence Header Types: An Overview
  • Customizing the WPResidence Logo Display

WP Residence Documentation

  • 1. General
    • How to Get Support
    • Get your buyer license code.
    • Use SSL / https
    • Server / Theme Requirements
  • 2. Installation
  • 3. Installation FAQ
  • 4. Advanced Search
    • Advanced Search Display Settings
    • Advanced Search Form
    • Geolocation Search for Half Map
    • Save Search Theme Options
    • Advanced Search Colors
  • 5. Agent, Agency & Developers
  • 6. Property Page
  • 7. Properties List
  • 8. Property Taxonomies
  • WpResidence Elementor Studio
  • 10. Blog Posts & Blog List
  • 11. Shortcodes
    • Contact Form
    • Featured Agency/Developer
    • Membership Packages
    • Testimonials
    • Google Map with Property Marker
    • Listings per Agent, Agency or Developer
    • Display Categories
    • Agent List
    • Recent Items Slider
    • Recent items
    • List Properties or Articles by ID
    • Featured Agent
    • Featured Article
    • Featured Property
    • Login & Register Form
    • Icon Content Box Shortcode
  • 12. Widgets
  • Theme Options
    • General Settings
    • User Types Settings
    • Appearance
    • Logos & Favicon
    • Header
    • Footer Style and Colors
    • Price & Currency
    • Property Custom Fields
    • Features & Amenities
    • Listing Labels
    • Theme Slider
    • Permalinks
    • Splash Page
    • Social & Contact
    • Map Settings
    • Pin Management
    • How read from file works
    • General Design Settings
    • Custom Colors Settings
    • Header Design & Colors
    • Mobile Menu Colors
    • User Dashboard Colors
    • Print PDF Design
    • Property, Agent, Blog Lists Design Settings
    • Sidebar Widget Design
    • Font management
    • How to add custom CSS
    • Custom Property Card Unit – Beta version
    • Email Management
    • Import & Export theme options
    • reCaptcha settings
    • YELP API Integration
    • iHomefinder Optima Express IDX
    • MEMBERSHIP & PAYMENT Settings
    • Property Submission Page
    • PayPal Setup
    • Stripe Setup
    • Wire Transfer Payment Method
  • Translation
  • FAQ
  • Pages
  • Header
  • Footer
  • Google or Open Street Maps
  • Payment Options
  • Plugins
    • Included Plugins
    • Third Party Plugins – IDX Compatibility
    • Third Party Plugins – Multi Languages
    • Third party Plugins – Other
  • Technical
    • Technical how to | Custom Code Required
    • Technical: Child Theme

Join Us On

Powered by WP Estate - All Rights Reserved
  • WpEstate
  • How to Build Your Website
  • Video Tutorials
  • Client Support
  • API