├── demo
├── img
│ ├── castle.png
│ └── house.png
└── index.html
├── mapmarker.jquery.js
└── README.txt
/demo/img/castle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aslamdoctor/jQuery.mapmarker/HEAD/demo/img/castle.png
--------------------------------------------------------------------------------
/demo/img/house.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aslamdoctor/jQuery.mapmarker/HEAD/demo/img/house.png
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Google Maps
6 |
7 |
8 |
9 |
10 |
11 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/mapmarker.jquery.js:
--------------------------------------------------------------------------------
1 | (function($){
2 | $.fn.mapmarker = function(options){
3 | var opts = $.extend({}, $.fn.mapmarker.defaults, options);
4 |
5 | return this.each(function() {
6 | // Apply plugin functionality to each element
7 | var map_element = this;
8 | addMapMarker(map_element, opts.zoom, opts.center, opts.markers);
9 | });
10 | };
11 |
12 | // Set up default values
13 | var defaultMarkers = {
14 | "markers": []
15 | };
16 |
17 | $.fn.mapmarker.defaults = {
18 | zoom : 8,
19 | center : 'United States',
20 | markers : defaultMarkers
21 | }
22 |
23 | // Main function code here (ref:google map api v3)
24 | function addMapMarker(map_element, zoom, center, markers){
25 | //console.log($.fn.mapmarker.defaults['center']);
26 |
27 | //Set center of the Map
28 | var myOptions = {
29 | zoom: zoom,
30 | mapTypeId: google.maps.MapTypeId.ROADMAP
31 | }
32 | var map = new google.maps.Map(map_element, myOptions);
33 | var geocoder = new google.maps.Geocoder();
34 | var infowindow = null;
35 | var baloon_text = "";
36 |
37 | geocoder.geocode( { 'address': center}, function(results, status) {
38 | if (status == google.maps.GeocoderStatus.OK) {
39 | //In this case it creates a marker, but you can get the lat and lng from the location.LatLng
40 | map.setCenter(results[0].geometry.location);
41 | }
42 | else{
43 | console.log("Geocode was not successful for the following reason: " + status);
44 | }
45 | });
46 |
47 | //run the marker JSON loop here
48 | $.each(markers.markers, function(i, the_marker){
49 | latitude=the_marker.latitude;
50 | longitude=the_marker.longitude;
51 | icon=the_marker.icon;
52 | var baloon_text=the_marker.baloon_text;
53 |
54 | if(latitude!="" && longitude!=""){
55 | var marker = new google.maps.Marker({
56 | map: map,
57 | position: new google.maps.LatLng(latitude,longitude),
58 | animation: google.maps.Animation.DROP,
59 | icon: icon
60 | });
61 |
62 | // Set up markers with info windows
63 | google.maps.event.addListener(marker, 'click', function() {
64 | // Close all open infowindows
65 | if (infowindow) {
66 | infowindow.close();
67 | }
68 |
69 | infowindow = new google.maps.InfoWindow({
70 | content: baloon_text
71 | });
72 |
73 | infowindow.open(map,marker);
74 | });
75 | }
76 | });
77 | }
78 |
79 | })(jQuery);
80 |
--------------------------------------------------------------------------------
/README.txt:
--------------------------------------------------------------------------------
1 | jQuery Map Marker Plugin 1.0.0
2 |
3 | Step-1 : Include necessary JS files in your tag
4 |
5 |
6 |
7 |
8 |
9 |
10 | --------------------------------------------------------------------
11 |
12 | Step-2 : Create a Map container using & give it an ID in your html body
13 |
14 |
15 |
16 | --------------------------------------------------------------------
17 |
18 | Step-3 : Apply the Plugin to the Map element using below code. Put the code before closing your tag
19 |
20 |
43 |
44 | In the code above, I have added a Link which will get you get the Latitude & Longitude co-ordinates of any specific location.
45 | myMarker : We have used this variable to store JSON data of each locations. Each locations will include 4 entities.
46 | 1. latitude - latitude of the location
47 | 2. longitude - longitude of the location
48 | 3. icon - a custom icon to display on map as marker (16 x 16 pixels size)
49 | 4. baloon_text - a Text to display in a Baloon on map when clicked on that specific Marker. You can also use this text in HTML format. Make sure you use single quotes(') only for HTML format baloon text.
50 |
51 | Additionally, there are 2 more options which you can set on Map.
52 | 1. zoom - to set default zoom level of the Map. Increase the value to zoom-in & Decrease the value to zoom-out
53 | 2. center - to specify the center location of the Map. Make sure the center location address you enter is spelled properly.
54 | 3. markers - this will be simply the Markers variable we created, here it is "myMarkers"
55 |
56 | --------------------------------------------------------------------
57 |
58 | Step-4 : That's All
--------------------------------------------------------------------------------