Magento – How To Add A Map For Every Product View Page

google-mapmagento-1.9product-page

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

Best Answer

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.

Related Topic