How To Add A Map For Every Product View Page

Question

I have a coffee store based shop in magento . Now i want to show the map for each coffee shop in the product view

every store has its different location for google map. any help would be very thankful and appreciable. there are different store google map store extension but i want to show on the product page and each product has its different google map location how we can do this?

I can copy a iframe google map which place in the static blog and called the static block in the view.phtml page but it is for only one product i want to call different maps based on different product

Answer 1

You can just create 2 attributes: "lat" and "lng" (latitude, longitude) (see here http://www.templatemonster.com/help/magento-how-to-create-an-attribute-and-apply-it-to-products.html)

Then copy /templates/catalog/product/view.phtml to your theme folder and insert this code into right place. (code from example of google map api https://developers.google.com/maps/documentation/javascript/examples/marker-simple)

 <?php
    $_helper = $this->helper('catalog/output');
    $lat = $_helper->productAttribute($_product, $_product->getLat(), 'lat');
    $lng = $_helper->productAttribute($_product, $_product->getLat(), 'lng');
?>

<div id="map"></div>
<script>

    function initMap() {
      var myLatLng = {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>};

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: myLatLng
      });

      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Hello World!'
      });
    }
</script>

hope this helps.

Answer 2

You may like using this module : https://github.com/Smile-SA/magento2-module-map that allow to wrap Google Map more easily in Magento.

An example usage can be found here : * Template : https://github.com/Smile-SA/magento2-module-store-locator/blob/master/view/frontend/templates/view/map.phtml and here * Block : https://github.com/Smile-SA/magento2-module-store-locator/blob/master/Block/View/Map.php

More information available here : https://github.com/Smile-SA/elasticsuite-for-retailer, but you will require only the smile/module-map for your use case