CODEWITHSUNDEEP
javascriptgoogle-maps
amit
amit

Reputation: 10261

Google maps: fetch search results and display markers

I want to search for locations in a particular zip code on the google maps api and display them on the map canvas. Suppose I want to search for all the Pizza Hut outlets in a particular zip code. How do i code for that?

Upvotes: 1

Views: 1615

Answers (1)

ZenMaster
ZenMaster

Reputation: 12736

I am not sure about ZIP code, but you can give a radius (in meters) around a location (NYC in this case - some place in Brooklyn like so (JSFiddle):

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ExtJS Google Maps Integration</title>

    <!-- Google Map API -->
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&region=US"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
</head>
<body>
<div id="map" style="width:100%; height:100%;"></div>

<script>
    var latlng = new google.maps.LatLng(40.693308, -73.990659);

    var options = 
    {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), options);

    var request = 
    {
        location: latlng,
        radius: '1000',
        name: ['Pizza Hut']
    };

    var service = new google.maps.places.PlacesService(map);
    service.search( request, callback );

    function callback(results, status) 
    {
        if (status == google.maps.places.PlacesServiceStatus.OK) 
        {
            for ( var i = 0; i < results.length; i++ ) 
            {
                var place = results[i];
                var loc = place.geometry.location;
                var marker = new google.maps.Marker
                ({
                    position: new google.maps.LatLng(loc.Pa,loc.Qa)
                });
                marker.setMap(map);  
            }
        }
    }
</script>
</body>
</html>

Upvotes: 1

Related Questions