jQuery Plugin To Locate and Display Determined Places with Google Maps API

File Size: 131KB
Views Total: 2761
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Locate and Display Determined Places with Google Maps API

MyPlaces is a jQuery plugin which allows you to locate an address on the map and display the nearby determined places as well as showing customized information about the location using Google Maps Api V3.

See also:

Basic Usage:

1. Include jQuery javascript library and jQuery MyPlaces Plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.myplaces.min-1.0.js"></script>

2. Include required jQuery MyPlaces Plugin stylesheet on the web page

<link href="css/myplaces.css" type="text/css" rel="stylesheet">

3. Create a container for the map

<div class="container"></div>

4. The sample javascript

// places
var places = [
{
"name": "My House",
"mapIcon": "http://r-ec.bstatic.com/images/hotel/square40/146/14694220.jpg",
"lat": -34.6390944,
"lng": -58.389152,
"tags": ["House", "Good Place"]
},
{
"id": "1",
"name": "The Simpsons house",
"address": "742 Evergreen Terrace",
"state": "Springfield",
"shortDescription": "The Simpsons house",
"longDescription": "The Simpsons House was designed by Kaufman and Broad homebuilders",
"mapIcon": "https://si0.twimg.com/profile_images/3663934134/d2b2a7fcacec55ba63c06474d10de385_normal.jpeg",
"lat": -34.6090943,
"lng": -58.389159,
"tags": ["Simpsons", "House"]
}
];


// default
$('.container').myplaces({places: places});

// or with custom settings
$('.container').myplaces({
places: places,
country: 'AR',
onLoad: function() {
  alert('Congratulation');
}
});

This awesome jQuery plugin is developed by somospnt. For more Advanced Usages, please check the demo page or visit the official website.