jQuery Place Engine

place engine - jquery plugin for gmaps place search

by limeric29

HTML

<a href="#" id="clear">Clear markers</a>

<br />
<div id="map" style="width:100%;height:600px;"></div>

<h2>Find:</h2>


<h3>By Click:</h3>

<ul>
    <li><a href="#" class="type-search" rel="bar">A Drink (bars)</a>

    </li>
    <li><a href="#" class="type-search" rel="church">God (churches)</a>

    </li>
</ul>

<h3>By Select:</h3>

<select name="type-search-box" id="type-search-select">
    <option value="xx">Choose Place Type</option>
    <option value="restaurant,bar">Restaurants and Bars</option>
    <option value="museum">Museum</option>
</select>

<h3>By Name:</h3>

<input type="text" name="name" id="name-box" />&nbsp;<a href="#" id="name-search">find it</a>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

JavaScript

/**
 * Place Engine - a JQuery Plugin that allows you to quickly utilize the google places api via JS
 *
 * Paul Thompson
 * v 0.3 - 8/09/2011
 *
 * Changes from 0.3: made more info link have place search in gmaps.
 *
 * Offered under the MIT license:
 * http://www.opensource.org/licenses/mit-license.php
 *
 **/

(function ($) {

    var map = null;
    var markers_array = new Array();

    var methods = {

        init: function (options) {
            return this.each(function () {

                var valid = true;
                var $obj = this;
                var the_id = $obj.id;
                var request = null;

                //set user defined option, if they exist
                if (options) {
                    $.extend(settings, options);
                }

                //validate that the user provided the bare minimum:
                if (!settings.latitude || !settings.longitude) {
                    valid = false;
                    alert("Latitude and longitude are required");
                }

                if (valid) {
                    attrs.locale = new google.maps.LatLng(settings.latitude, settings.longitude);

                    map = new google.maps.Map(document.getElementById(the_id), {
                        mapTypeId: methods.get_map_type(),
                        center: attrs.locale,
                        zoom: settings.zoom
                    });
                    attrs.infowindow = new google.maps.InfoWindow();

                    if (settings.types || settings.name) {
                        request = methods.build_search();
                        methods.run_search(request);
                    }
                }

            });
        },
        output_results: function (results, status, $obj) {

            var html = "<table><tr><th>Place Name</th><th>Location</th><th>More Information?</th></tr>";
            var open_tags = "<tr><td>";
            var middle_tags = "</td><td>";
            var...