Google map api - use multiple keywords in place searches

In order to google Place Search  and Place Library documentation there no option to use multiple keywords for searching.

Therefore I have done this;

I've created two PlaceService objects because I need to look at 'Pizza Hut' and 'KFC' both in single click.

var service = new google.maps.places.PlacesService(map);
            service.nearbySearch({
                location: pyrmont,
                radius: 50000,
                keyword: ['KFC']
            }, callback);

var service2 = new google.maps.places.PlacesService(map);
            service2.nearbySearch({
                location: pyrmont,
                radius: 50000,
                keyword: ['Pizzahut']
            }, callback);


and It's working well.

KFC Layer


KFC + Pizza Hut Layer

KFC + Pizza Hut + Subway Layer


Full source code:

<!DOCTYPE html>
<html>

<head>
    <title>
        Map
    </title>
    <script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=[use-your-api-key]&libraries=places">
    </script>
    <script type="text/javascript">
        var map;
        var infowindow;

        function initMap() {

            var pyrmont = 0;
            pyrmont = new google.maps.LatLng(-37.8274134, 144.9352466)

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

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch({
                location: pyrmont,
                radius: 50000,
                keyword: ['KFC']
            }, callback);
            var service2 = new google.maps.places.PlacesService(map);
            service2.nearbySearch({
                location: pyrmont,
                radius: 50000,
                keyword: ['Pizzahut']
            }, callback);
            var service3 = new google.maps.places.PlacesService(map);
            service3.nearbySearch({
                location: pyrmont,
                radius: 50000,
                keyword: ['Subway']
            }, callback);
        }

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

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }

        document.onreadystatechange = function() {
            var state = document.readyState// you can use jquery document.ready for this
            if (state == 'complete') {
                initMap();
            }
        }
    </script>
</head>

<body style="margin: 0 !important; padding: 0!important">
    <div style="margin: 0 !important">
        <div id="map" style="width: 100%;height: 100%;position: absolute;display: block;">
        </div>
    </div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Brother printer password reset using telnet

Image
  Login into printer using telnet. telnet 10.1.0.110 Enter default telnet password as 'access' . Press enter for the username or you can use admin or what ever username.  Type this command to reset the password SET PASSWORD abc123 New password will be abc123 .    Clear the web password of  MFC-8510DN  Note : when you change the password this will change the both web and telnet password. If you just need to reset the password enter SET PASSWORD. and hit enter key without password. That will reset the web login password and also it will automatically change the telnetpassword back to 'access'
Read more....

How to adjust the brightness in Samsung 19" SyncMaster SA100 LED monitor?

Image
METHOD ONE (I) 1. GOTO this site. http://www.samsung.com/us/consumer/learningresources/monitor/magetune/pop_download.html 2.download suitable version with our OS . me use windows7 then i choose ex :  http://www.samsung.com/us/consumer/learningresources/monitor/download/MagicTunePremium_Win7_WinVista_32bit_3.2.2.zip 3.run the program.if you are using laptop to use this LED monitor as secondary display first time this program may be not work.then drag that program into your secondary monitor display area and then click image menu. 4.Any questions please ask me. SECOND METHOD (II) Hold power button 8 - 10 seconds then monitor adjust automatically. THIRD METHOD (III) (STILL BETA VERSION RELEASED) You can download my small program [Open source] to adjust monitor brightness (dual monitor supported) from below link [Available as a source code and binary both] http://freevbs.blogspot.com/p/computer.html
Read more....

ASP.NET Server Controls Tutorial

Image
In this tutorial, you will learn how to build an ASP.NET server control by creating a Hello World Control. Along the way, we'll review the fundamental process of server control development from scratch. Creating a Custom Control Project First, we need to create a new class library project to hold our custom controls. By creating the custom control in a separate class library, we can compile the project into a separate DLL and use the custom control in any application that requires it. Open your ASP.NET project with Visual Studio or Visual Web Developer. In Solution Explorer, right click the solution name, and select Add New Project from the context menu. In the Add New Project dialog box, choose the project type to be a Web project, and select ASP.NET Server Control as the template, like so:
Read more....