Playground

Jan 19

Google Maps Places API Nearby (Example)

By Vidal de Wit | Coding, Javascript, Playground | No Comments

Nearby App Example of Google Maps Places API to find different places like ATM, Restaurant, Airport etc nearby you. (with full source-code)

<html>
<head>
    <title>Google Maps Places API Nearby Example</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    $(document).ready(function(){
        // type_holder
        // <div><label><input type="checkbox" class="types" value="mosque" />Mosque</label></div>

        var types = ['accounting','airport','amusement_park','aquarium','art_gallery','atm','bakery','bank','bar','beauty_salon','bicycle_store','book_store','bowling_alley','bus_station','cafe','campground','car_dealer','car_rental','car_repair','car_wash','casino','cemetery','church','city_hall','clothing_store','convenience_store','courthouse','dentist','department_store','doctor','electrician','electronics_store','embassy','fire_station','florist','funeral_home','furniture_store','gas_station','gym','hair_care','hardware_store','hindu_temple','home_goods_store','hospital','insurance_agency','jewelry_store','laundry','lawyer','library','liquor_store','local_government_office','locksmith','lodging','mel_delivery','meal_takeaway','mosque','movie_rental','movie_theater','moving_company','museum','night_club','painter','park','parking','pet_store','pharmacy','physiotherapist','plumber','police','post_office','real_estate_agency','restaurant','roofing_contractor','rv_park','school','shoe_store','shopping_mall','spa','stadium','storage','store','subway_station','synagogue','taxi_stand','train_station','transit_station','travel_agency','university','veterinary_care','zoo'];
        var html = '';

        $.each(types, function( index, value ) {
            var name = value.replace(/_/g, " ");
            html += '<div><label><input type="checkbox" class="types" value="'+ value +'" />'+ capitalizeFirstLetter(name) +'</label></div>';
        });

        $('#type_holder').html(html);
    });

    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    var map;
    var infowindow;
    var autocomplete;
    var countryRestrict = {'country': 'in'};
    var selectedTypes = [];

    function initialize()
    {
        autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')), {
            types: ['(regions)'],
           // componentRestrictions: countryRestrict
        });

        var pyrmont = new google.maps.LatLng(52.5666644, 4.7333304);

        map = new google.maps.Map(document.getElementById('map'), {
            center: pyrmont,
            zoom: 12
        });
    }

    function renderMap()
    {
        // Get the user defined values
        var address = document.getElementById('address').value;
        var radius  = parseInt(document.getElementById('radius').value) * 1000;
        
        // get the selected type
        selectedTypes = [];
        $('.types').each(function(){
            if($(this).is(':checked'))
            {
                selectedTypes.push($(this).val());
            }
        });

        var geocoder    = new google.maps.Geocoder();
        var selLocLat   = 0;
        var selLocLng   = 0;

        geocoder.geocode({'address': address}, function(results, status) {
            if (status === 'OK')
            {
                //console.log(results[0].geometry.location.lat() + ' - ' + results[0].geometry.location.lng());

                selLocLat   = results[0].geometry.location.lat();
                selLocLng   = results[0].geometry.location.lng();

                //var pyrmont = new google.maps.LatLng(52.5666644, 4.7333304);

                var pyrmont = new google.maps.LatLng(selLocLat, selLocLng);

                map = new google.maps.Map(document.getElementById('map'), {
                    center: pyrmont,
                    zoom: 11
                });

                //console.log(selectedTypes);

                var request = {
                    location: pyrmont,
                    //radius: 5000,
                    //types: ["atm"]
                    radius: radius,
                    types: selectedTypes
                };

                infowindow = new google.maps.InfoWindow();

                var service = new google.maps.places.PlacesService(map);
                service.nearbySearch(request, callback);
            }
            else
            {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    function callback(results, status)
    {
        if (status == google.maps.places.PlacesServiceStatus.OK)
        {
            for (var i = 0; i < results.length; i++)
            {
                createMarker(results[i], results[i].icon);
            }
        }
    }

    function createMarker(place, icon) {
        var placeLoc = place.geometry.location;

        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: {
                url: icon,
                scaledSize: new google.maps.Size(20, 20) // pixels
            },
            animation: google.maps.Animation.DROP
        });
        
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name+ '<br>' +place.vicinity);
            infowindow.open(map, this);
        });
    }
    </script>
</head>
<body>

<div style="float: right;">
    <div id="map" style="width:900px; height:600px;"></div>
</div>

<div style="float: left; width: 400;">
    <form name="frm_map" id="frm_map">
        <table>
            <tr>
                <th>Address</th>
                <td>
                    <input type="text" name="address" id="address" value="Akersloot, Netherlands">
                </td>
            </tr>
            <tr>
                <th>Radius</th>
                <td>
                    <input type="text" name="radius" id="radius" value="5" placeholder="In KM">
                </td>
            </tr>
            <tr>
                <th>Types</th>
                <td>
                    <div id="type_holder" style="height: 200px; overflow-y: scroll;">
                        <!-- Dynamic Content -->    
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="Show" id="submit" onclick="renderMap();">
                    <input type="reset" value="Reset">
                </td>
            </tr>
        </table>
    </form>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCU6bsx-PLT5fW02T5GeiwA8cOOY7l2rU4&libraries=places&callback=initialize" async defer></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

<html>

<head>

<title>Google Maps Places API Nearby Example</title>

$(document).ready(function(){

// type_holder

// <div><label><input type="checkbox" class="types" value="mosque" />Mosque</label></div>

var types = ['accounting','airport','amusement_park','aquarium','art_gallery','atm','bakery','bank','bar','beauty_salon','bicycle_store','book_store','bowling_alley','bus_station','cafe','campground','car_dealer','car_rental','car_repair','car_wash','casino','cemetery','church','city_hall','clothing_store','convenience_store','courthouse','dentist','department_store','doctor','electrician','electronics_store','embassy','fire_station','florist','funeral_home','furniture_store','gas_station','gym','hair_care','hardware_store','hindu_temple','home_goods_store','hospital','insurance_agency','jewelry_store','laundry','lawyer','library','liquor_store','local_government_office','locksmith','lodging','mel_delivery','meal_takeaway','mosque','movie_rental','movie_theater','moving_company','museum','night_club','painter','park','parking','pet_store','pharmacy','physiotherapist','plumber','police','post_office','real_estate_agency','restaurant','roofing_contractor','rv_park','school','shoe_store','shopping_mall','spa','stadium','storage','store','subway_station','synagogue','taxi_stand','train_station','transit_station','travel_agency','university','veterinary_care','zoo'];

var html = '';

$.each(types, function( index, value ) {

var name = value.replace(/_/g, " ");

html += '<div><label><input type="checkbox" class="types" value="'+ value +'" />'+ capitalizeFirstLetter(name) +'</label></div>';

});

$('#type_holder').html(html);

});

function capitalizeFirstLetter(string) {

return string.charAt(0).toUpperCase() + string.slice(1);

}

var map;

var infowindow;

var autocomplete;

var countryRestrict = {'country': 'in'};

var selectedTypes = [];

function initialize()

{

autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')), {

types: ['(regions)'],

// componentRestrictions: countryRestrict

});

var pyrmont = new google.maps.LatLng(52.5666644, 4.7333304);

map = new google.maps.Map(document.getElementById('map'), {

center: pyrmont,

zoom: 12

});

}

function renderMap()

{

// Get the user defined values

var address = document.getElementById('address').value;

var radius = parseInt(document.getElementById('radius').value) * 1000;

// get the selected type

selectedTypes = [];

$('.types').each(function(){

if($(this).is(':checked'))

{

selectedTypes.push($(this).val());

}

});

var geocoder = new google.maps.Geocoder();

var selLocLat = 0;

var selLocLng = 0;

geocoder.geocode({'address': address}, function(results, status) {

if (status === 'OK')

{

//console.log(results[0].geometry.location.lat() + ' - ' + results[0].geometry.location.lng());

selLocLat = results[0].geometry.location.lat();

selLocLng = results[0].geometry.location.lng();

//var pyrmont = new google.maps.LatLng(52.5666644, 4.7333304);

var pyrmont = new google.maps.LatLng(selLocLat, selLocLng);

map = new google.maps.Map(document.getElementById('map'), {

center: pyrmont,

zoom: 11

});

//console.log(selectedTypes);

var request = {

location: pyrmont,

//radius: 5000,

//types: ["atm"]

radius: radius,

types: selectedTypes

};

infowindow = new google.maps.InfoWindow();

var service = new google.maps.places.PlacesService(map);

service.nearbySearch(request, callback);

}

else

{

alert('Geocode was not successful for the following reason: ' + status);

}

});

}

function callback(results, status)

{

if (status == google.maps.places.PlacesServiceStatus.OK)

{

for (var i = 0; i < results.length; i++)

{

createMarker(results[i], results[i].icon);

}

function createMarker(place, icon) {

var placeLoc = place.geometry.location;

var marker = new google.maps.Marker({

map: map,

position: place.geometry.location,

icon: {

url: icon,

scaledSize: new google.maps.Size(20, 20) // pixels

animation: google.maps.Animation.DROP

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.setContent(place.name+ '<br>' +place.vicinity);

infowindow.open(map, this);

});

}

</script>

</head>

<body>

</div>

<table>

<tr>

<th>Address</th>

<td>

</td>

</tr>

<tr>

<th>Radius</th>

<td>

</td>

</tr>

<tr>

<th>Types</th>

<td>

</div>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

Preview on CodePen.io

Jan 19

Etsy API Search with jQuery (Example)

By Vidal de Wit | Coding, Playground | No Comments

Playing around t with Etsy API. Here’s a working example of how to make a simple search request to the Etsy API with jQuery.

<html>
<head>
<title>Etsy Search</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
(function($){

    $(document).ready(function(){
        $('#etsy-search').bind('submit', function() {
            api_key = "mwj5r3fjh7qfignyned2qmmx";
            terms = $('#etsy-terms').val();
            etsyURL = "https://openapi.etsy.com/v2/listings/active.js?keywords="+
                terms+"&limit=12&includes=Images:1&api_key="+api_key;

            $('#etsy-images').empty();
            $('<p></p>').text('Searching for '+terms).appendTo('#etsy-images');

            $.ajax({
                url: etsyURL,
                dataType: 'jsonp',
                success: function(data) {
                    if (data.ok) {
                        $('#etsy-images').empty();
                        if (data.count > 0) {
                            $.each(data.results, function(i,item) {
                                $("<img/>").attr("src", item.Images[0].url_75x75).appendTo("#etsy-images").wrap(
                                    "<a href='" + item.url + "'></a>"
                                );
                                if (i%4 == 3) {
                                    $('<br/>').appendTo('#etsy-images');
                                }
                            });
                        } else {
                            $('<p>No results.</p>').appendTo('#etsy-images');
                        }
                    } else {
                        $('#etsy-images').empty();
                        alert(data.error);
                    }
                }
            });

            return false;
        })
    });

})(jQuery);
</script>
</head>
<body>
    <form id="etsy-search">
        <input id="etsy-terms" size="32">
        <button>Search!</button>
    </form>

    <div id="etsy-images"></div>
</body>
</html>

<html>

<head>

<title>Etsy Search</title>

(function($){

$(document).ready(function(){

$('#etsy-search').bind('submit', function() {

api_key = "mwj5r3fjh7qfignyned2qmmx";

terms = $('#etsy-terms').val();

etsyURL = "https://openapi.etsy.com/v2/listings/active.js?keywords="+

terms+"&limit=12&includes=Images:1&api_key="+api_key;

$('#etsy-images').empty();

$('<p></p>').text('Searching for '+terms).appendTo('#etsy-images');

$.ajax({

url: etsyURL,

dataType: 'jsonp',

success: function(data) {

if (data.ok) {

$('#etsy-images').empty();

if (data.count > 0) {

$.each(data.results, function(i,item) {

$("<img/>").attr("src", item.Images[0].url_75x75).appendTo("#etsy-images").wrap(

"<a href='" + item.url + "'></a>"

);

if (i%4 == 3) {

$('<br/>').appendTo('#etsy-images');

}

});

} else {

$('<p>No results.</p>').appendTo('#etsy-images');

}

} else {

$('#etsy-images').empty();

alert(data.error);

}

});

return false;

})

});

})(jQuery);

</script>

</head>

<body>

<button>Search!</button>

</form>

</body>

</html>

Pure Animated CSS Weather Icons

Perspective CSS3 Shadow Effect

Google Maps Places API Nearby (Example)

Preview on CodePen.io

Etsy API Search with jQuery (Example)

Preview and Edit on Codepen.io

Recent Posts Extra

Recent Jobs

Playground

Pure Animated CSS Weather Icons

Perspective CSS3 Shadow Effect

Google Maps Places API Nearby (Example)

Preview on CodePen.io

Etsy API Search with jQuery (Example)

Preview and Edit on Codepen.io

Recent Posts Extra

Recent Jobs

BROWSE ALL FRONT-END DEVELOPER TOPICS

Tags