0

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

enter image description here

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

  • I think to create static blocks according to your needs. Then show the blocks on store basis on the product page after the info or short description block. – Mahmood Rehman Jul 24 at 2:51
0

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.

0

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.