Google Maps plugin mapsed.js use examples

Mappy.js is a jquery based map plugin, and let's look at how to use it.

Preparatory work
First need to load the necessary JS and CSS files to the HTML page, of course, these files in our download package has been packaged, please feel free to download the use.

The code is as follows	Copy Code
<script src= "Http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false" ></script> <script src= "Jquery-1.10.2.js" ></script> <script src= "Mapsed.js" ></script> <link href= "Mapsed.css" rel= "stylesheet" >

Load location data
First we want to place a div in the HTML as a map container, and we can define the height and width of the container in the CSS.

<div id= "custom_places" class= "Maps" ></div>
Now you need to call Google Maps and place the exact location on the map, Mapsed.js provides a lot of interfaces. Showonload: That is, load display data, JSON format, we can read from the database and then through the program into the JSON format, this article does not involve the database, interested friends can do their own try. Parameter autoshow: Automatic display, LAT: Latitude, LNG: Longitude, Name: Street: Block description information, UserData: Data ID.

The code is as follows

Copy Code

$ (function () { $ ("#custom_places"). Mapsed ({ Showonload: [ { Autoshow:true, lat:22.540053, lng:113.983225, Name: "Happy Valley", Street: "Participatory, ornamental, entertaining, interesting modern theme park." ", Userdata:1 }, { Autoshow:true, lat:22.536113, lng:113.972569, Name: "Window of the World", Street: "Gathers the world thousands of years human civilization essence, the historical relics, the scenic spot, the natural scenery, the world wonders!" ", Userdata:2 }, { Autoshow:true, Canedit:false, lat:22.530041, lng:113.982479, Name: "Splendid China Folk Culture village", Street: "Invite you to travel the most beautiful festival!" ", Userdata:3 } ] }); });

Mark Location
After loading the map, we want to mark the location on the map, just click the + number in the top right corner of the map, then locate the bubble anchor in the mobile map, click on the form input, enter the information to save, of course, you can write the data through the interface to the database.

The code is as follows	Copy Code
<div id= "add_places" class= "Maps" ></div>

Setting Allowadd to True allows you to add a callout location, and a + number appears in the upper-right corner of the map. The OnSave callback function is what you need to do when you click Save.

The code is as follows

Copy Code

$ (function () { $ ("#add_places"). Mapsed ({ Allowadd:true, Onsave:function (M, newplace) { var missing = []; Detect errors starting at bottom ... we only have spaces for one error in a time, so this way we ll ... from if (Newplace.postcode = = "") Missing.push ("postcode"); if (Newplace.street = = "") Missing.push ("Street"); if (Newplace.name = = "") Missing.push ("name"); Anything missing? if (Missing.length > 0) { Return the "error message" so the callback doesn ' t progress Return "Required:" + missing.join (); } if (newplace) { if (Newplace.markertype = = "new") { Simulate a primary key being save to a db Newplace.userdata = parseint (Math.random () * 100000); var n_name = Newplace.name; var n_street = Newplace.street; var n_postcode = Newplace.postcode; $.post (' do.php ', {name:n_name,street:n_street,postcode:n_postcode},function (msg) { Alert (msg); }); } } Indicate form was OK and saved Return ""; }, Showonload: [ { Autoshow:false, Canedit:false, the lat:22.530041, lng:113.982479 } ] }); });

Search locations
The map search feature is certainly essential and adding a search strip to your map is pretty cool.

The code is as follows	Copy Code
<div id= "search_places" class= "Maps" ></div>

SearchOptions can set the relevant parameters for the search, where enabled is to open the search bar, Initsearch is the initial search content, placeholder if the initial content is not set, the placeholder content is displayed.

The code is as follows	Copy Code
$ (function () { $ ("#search_places"). Mapsed ({ SearchOptions: { Enabled:true, Initsearch: "Shenzhen window of the World", PLACEHOLDER: "Search ..." } }); });

Mapsed.js also provides a lot of Google Map-related features and interfaces, this article is just a brief introduction, if you feel that mapsed.js is useful for your project and intend to use it