places google maps mapsed - Free Download Add/Pick/Search Places On Google Maps - mapsed.js

Free Download Add/Pick/Search Places On Google Maps – mapsed.js

Posted on

This time I will share jQuery Plugin and tutorial about Add/Pick/Search Places On Google Maps – mapsed.js, hope it will help you in programming stack.

places google maps mapsed - Free Download Add/Pick/Search Places On Google Maps - mapsed.js
File Size: 46.7 KB
Views Total: 1611
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

mapsed.js is a jQuery plugin for Google Maps that allows the user to select, search places and add/remove custom places on a Google Map. Requires Google Maps Places API.

More Features:

  • Shows place info once the map has finished loading.
  • Allows the user to edit the content of selected places.
  • Displays the details of a place.
  • Centers the map based on your GEO.
  • Supports custom themes.
  • Custom marker images.
  • Help window showing additional instructions to the user.
  • Callback functions.

How to use it:

1. Load the necessary jQuery library and Google Maps Places API in the document. Don’t forget to replace the API key with your owns.

2 <script src="/path/to/cdn/jquery.min.js"></script>

2. Download and load the mapsed.js plugin after jQuery.

1 <script src="mapsed.js"></script>

3. Create an element that serves as the container for the Google map.

1 <div id="myMap"></div>

4. Initialize the Google map and add a custom place to the map.

01 $("#myMap").mapsed({
02   showOnLoad: [
03     // City Varieties
04     {
05       // flag that this place should have the tooltip shown when the map is first loaded
06       autoShow: true,
07       // flags the user can edit this place
08       canEdit: false,
09       lat: 53.798823,
10       lng:-1.5426760000000286,
11       place_id: "ChIJQd3IwBtceUgRha6laiANoro"
12     },
13     // Random made up CUSTOM place
14     {
15       // flag that this place should have the tooltip shown when the map is first loaded
16       autoShow: true,
17       lat: 53.79,
18       lng:-1.5426760000000286,
19       name: "Somewhere",
20       street: "Over the rainbow, Up high way",
21       userData: 99
22     }
23  
24   ]
25 });

5. Create a Place Picker that allows you to get the place info using the onSelect callback.

01 $("#myMap").mapsed({
02   // allow user to select somewhere
03   onSelect: function(m, details) {
04     var msg =
05       "Name: " + details.name +
06       "<br/>Address: " +
07         details.street + ", " +
08         details.town + ", " +
09         details.area + ", " +
10         details.postCode +
11       "<br/>website: " + details.website +
12       "<br/>g+: " + details.url +
13       "<br/>Tel: " + details.telNo           
14     ;
15     if (details.place_id) {
16       msg += "<br/>Place_id: " + details.place_id
17     }
18     m.showMsg("Place selected!", msg);
19      
20     // indicate tip should be closed
21     return true;
22   },
23    
24   showOnLoad:
25     // City Varieties
26     {
27       // flag that this place should have the tooltip shown when the map is first loaded
28       autoShow: true,
29       lat: 53.798823,
30       lng:-1.5426760000000286,
31       place_id: "ChIJQd3IwBtceUgRha6laiANoro"
32     }
33    
34 });

6. This example shows how to add a custom place on the Google map.

01 $("#myMap").mapsed({
02  
03   // Adds the "+" button to the control bar at the top right of the map
04   allowAdd: true,
05    
06   // Enables edit of custom places (to your web application, not Google Maps!)
07   // ... again the presence of the callback enables the functionality
08   onSave: function(m, newPlace) {
09     var missing = [];
10      
11     // detect errors starting at bottom
12     // ... we only have space for one error at a time, so this way we'll report
13     // ... from the top down
14     if (newPlace.postCode === "") missing.push("postcode");
15     if (newPlace.street === "")   missing.push("street");
16     if (newPlace.name === "")     missing.push("name");
17      
18     // anything missing?
19     if (missing.length > 0) {
20       // return the error message so the callback doesn't progress
21       return "Required: " + missing.join();
22     }
23      
24     if (newPlace) {
25       if (newPlace.markerType == "new") {
26         // simulate a primary key being save to a db
27         newPlace.userData = parseInt(Math.random() * 100000);
28       }
29  
30       var title = "";
31       var msg =
32         "userData: " + newPlace.userData +
33         "<br/>name: " + newPlace.name +
34         "<br/>street: " + newPlace.street + ", " +
35           newPlace.area + ", " +