Building a Product “Map” with working Lat/Long Locations

  • Resolved bammichael

    (@bammichael)


    2 years, 7 months ago

    I’ve just been asked to add a “property search” feature that allows users to explore a map and click on products (WooCommerce, placed on the map by a geolocation unique to each product, latitude and longitude only) to expand details or jump to the product page. It also needs to vanish if the product is out of stock.

    Any advice would be greatly appreciated. My current idea is to write a new API that would sync the property database in WC to a third-party map API like Google Maps or ArcGIS, but this likely wouldn’t work well with “page filter rules” from local plugins. ??

    An example can be viewed on the Realtor website search swapping it to map.

    • This topic was modified 2 years, 7 months ago by Steven Stern (sterndata).
    • This topic was modified 2 years, 7 months ago by bammichael.
    • This topic was modified 2 years, 7 months ago by bammichael.
    • This topic was modified 2 years, 7 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    Google Maps has a number of mapping options. The most versatile (and most complicated to use) is the JavaScript Maps API. Your JavaScript can add map pins that expand into small text modals on click/tap. Since it’s all done dynamically, it can accurately reflect the current product query.

    You’d first make an appropriate product query with PHP and SQL. Presumably each product has associated lat/long coordinates. An array or object containing all the necessary data is passed from PHP to JavaScript using wp_add_inline_script(). Your JavaScript can then use the data to add the map pins to the map through the JavaScript Maps API.

    That would be the code it yourself approach. It’s the best way to get exactly what you want. There are a number of mapping plugins that should make map development easier, but then you’d be constrained by how the plugin works, which may not align with what you have envisioned. But you’re saved from needing to fully develop your own map with JavaScript.

Viewing 1 replies (of 1 total)
  • The topic ‘Building a Product “Map” with working Lat/Long Locations’ is closed to new replies.

Tags