Skip to content

Instantly share code, notes, and snippets.

@paulgosnell

paulgosnell/Full Sample for v 0.3

Forked from rpupkin77/Full Sample for v 0.3
Created December 7, 2011 20:34
Show Gist options
  • Save paulgosnell/1444514 to your computer and use it in GitHub Desktop.
Save paulgosnell/1444514 to your computer and use it in GitHub Desktop.
Download ZIP
place engine - jquery plugin for gmaps place search
Raw
Full Sample for v 0.3
<html>
<head>
<title>Place Engine Test</title>
</head>
<body>
<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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.place-engine.js"></script>
<script type="text/javascript">
$(function(){
//init the map on LA
$("#map").place_engine({"latitude":"34.05", "longitude":"-118.25"});
//clears the map on click
$("#clear").click(function(){
$("#map").place_engine("clear_markers");
});
//search by type on a link click
$(".type-search").click(function(){
//for rel based searches, selector must be (this).
$(this).place_engine("type_search");
});
//search by type using a select box
$("#type-search-select").change(function(){
var the_val = $(this).val();
if(the_val != "xx")
{
//if you are using type searcha nd passing vals, selector can be "this" or the map holder
$("#map").place_engine("type_search", the_val);
}
});
//search by name
$("#name-search").click(function(){
var the_val = $("#name-box").val();
if(the_val != "")
{
//if you are using name_search, use the map holder as teh selector
$("#map").place_engine("name_search", the_val);
}
});
});
</script>
</body>
<html>
Raw
jquery.place-engine.js
/**
* 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 close_tags = "</tr></td>";
var after = "</table>";
var more_info_link = "";
if(settings.html_container && settings.output_format != "table")
{
html = "<ul>";
open_tags = "<li>";
middle_tags = " - ";
close_tags = "</li>";
after = "</ul>";
}
var the_place = null;
if (status == google.maps.places.PlacesServiceStatus.OK)
{
if(settings.debug)
{
alert(status);
}
for (var i = 0; i < results.length; i++)
{
the_place = results[i];
// <![cdata[
more_info_link = "<a href='http://maps.google.com/maps?ie=UTF-8&amp;fb=1&amp;q="+the_place.name.replace(/'/g, "")+"&amp;hnear="+the_place.vicinity.replace(/'/g, "")+"&amp;fb=1&amp;gl=us&amp;oi=local_result&amp;ct=image&amp;hq="+the_place.name.replace(/'/g, "")+"' target='_blank'>Get More Information</a>";
// ]]>
methods.add_marker(the_place, more_info_link);
if(settings.html_container){
html += open_tags+the_place.name+middle_tags+the_place.vicinity+middle_tags+more_info_link+close_tags;
}
}
}
html += after;
if(settings.html_container){
$(settings.html_container).html(html);
}
},
add_marker:function(place, more_info_link)
{
var placeLoc = place.geometry.location;
var image = new google.maps.MarkerImage(place.icon, new google.maps.Size(20,20),new google.maps.Point(0,0), // The origin
new google.maps.Point(13,18),new google.maps.Size(20,20));
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon:image
});
markers_array.push(marker);
google.maps.event.addListener(marker, 'click', function() {
attrs.infowindow.setContent("<div>"+place.name+"<br />"+place.vicinity+"<br />"+more_info_link);
attrs.infowindow.open(map, this);
});
},
clear_markers:function(){
if (markers_array != null)
{
for (i in markers_array)
{
markers_array[i].setMap(null);
}
}
},
build_search:function(types, name)
{
var r={radius:settings.radius, location:attrs.locale};
r.types = "";
if(types != "NOTYPES")
{
if(types||settings.types){
the_types = types ? types : settings.types;
r.types = the_types.split(",");
}
}
if(name || settings.name){
settings.name = name != null ? name : settings.name;
r.name = settings.name
}
return r
},
name_search:function(search_value){
var req = null;
this.each(function(){
req = methods.build_search("NOTYPES", search_value);
methods.run_search(req);
});
},
type_search:function(types){
var req = null;
this.each(function(){
var the_types = types != null ? types : this.rel;
req = methods.build_search(the_types, "");
methods.run_search(req);
});
},
run_search:function(request){
if(settings.clear)
{
methods.clear_markers();
}
var service = new google.maps.places.PlacesService(map);
service.search(request, methods.output_results);
},
get_map_type:function(){
var type = ""
switch(settings.map_type){
case "terrain":
type = google.maps.MapTypeId.TERRAIN;
break;
case "road":
type = google.maps.MapTypeId.ROADMAP;
break;
case "hybrid":
type = google.maps.MapTypeId.HYBRID;
break;
}
return type;
}
}
//attrs - need to be accessible only to the app, user can't override
var attrs = {
'results':"",
'locale':null,
'map':null,
'infowindow':null,
'public_methods': ["init", "clear_markers", "type_search", "name_search"]
}
var settings = {
'longitude' : false,
'sensor':"false",
'latitude':false,
'zoom':13,
'radius' : 5000,
'types' : false,
'clear':true,
'name':false,
'map_type':"terrain",
'language':'en',
'map_id':"map",
"debug":false,
'html_container':false,
'output_format':"table"
};
$.fn.place_engine = function( method ) {
if ( methods[method] && (attrs.public_methods.indexOf(method) >=0))
{
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
}
else if ( typeof method === 'object' || ! method )
{
return methods.init.apply( this, arguments );
}
else
{
$.error( ' The method ' + method + ' is not a public place engine method' );
}
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment