Thursday 21 March 2013

Create More Tabs in Product info Tabs on Product View page

Add map tab

Navigate to=>Theam=>Layout=>catalog.xml

Add below code

 <action method="addTab" translate="title" module="catalog"><alias>Location</alias><title>Location</title><block>core/template</block><template>catalog/product/map.phtml</template></action>

Add this code in map.phtml


<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
/* private variables */
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();

/* function to initialize the map */
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}


function codeAddress(address, title, imageURL) {
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({map: map,position: results[0].geometry.location,icon: imageURL,title: title});

            /* Set onclick popup */
var infowindow = new google.maps.InfoWindow({content: title});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(marker.get('map'), marker);});
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

/* Geocoding based on latitude and longitude */
function codeLatLng(latlng, title, imageURL) {
    var latlngStr = latlng.split(',', 2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                map.setZoom(11);
                marker = new google.maps.Marker({position: latlng,map: map,icon: imageURL,title: title,content: title});

                /* Set onclick popup */
            var infowindow = new google.maps.InfoWindow({content: title});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(marker.get('map'), marker);});

            } else {
                alert('No results found');
            }
        } else {
            alert('Geocoder failed due to: ' + status);
        }
    });
}
</script>
<div>
  <div id="map_canvas" style="height:500px;width:600px;"></div>
</div>

<script>
/* set  iconpath and the initiate the google map */
var iconPath = "";
initialize();

/* Geocoding based on latitude and longitude */
codeLatLng('-33.971750, 150.894251', 'Glenfield NSW', iconPath + "icon2.png");

</script>

No comments:

Post a Comment