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.
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.
1 |
< script src = "https://maps.googleapis.com/maps/api/js?libraries=places&key=API KEY" ></ script > |
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 + ", " + |