JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div class="content">
<div id="map"></div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map{
height: 100%;
}
/** desktop **/
.content{text-align:center; margin:0 auto; width:100%; height:1000px}
.hcard{width:700px}
.hcard img{display:block; margin:1em auto}
@media print {
html, body {
height: auto;
}
#map{
height: 650px;
}
}
JavaScript
function getStoreData(getstoreId, city, perPageLimt, start = 0) {
// var catId = catid;
$('#current_start').val(start);
$.ajax({
url: "<?php Mage::getUrl('/webservices/webnew/storeproduct.php'); ?>",
type: "POST",
data: {
storeId: getstoreId,
city: city,
country: Country,
'limit': perPageLimt,
'starting_from': start
},
beforeSend: function(response) {
// jQuery(".se-pre-con").show("slow");
//jQuery('.products_row').html('<img src="images/GOTG-animation.png">');
$('.moresection').html('<div class="loadmore"><img class="btnloadmore productmore" src="images/ajax-loader.gif" /></div>');
},
success: function(response) {
jQuery(".se-pre-con").fadeOut("slow");
jQuery(".moresection").empty();
var data = JSON.parse(response);
var StrProduct = '';
if (data.status == "success") {
var products = data.product;
for (productdata in products) {
//alert(products[productdata].product_name);
StrProduct += '<div class="col-xs-3" id="productdiv" data-id="' + products[productdata].product_id + '">';
StrProduct += '<div class="img-col">';
StrProduct += '<img src="' + products[productdata].product_thumbnail + '">';
StrProduct += '</div>';
StrProduct += '<p class="product_name">' + products[productdata].product_name + '</p>';
StrProduct += '<div id="pro_price"><span class="price"> ' + products[productdata].product_price + '</span></div>';
...