Easily integrate maps in your projects
JS Javascript Google Map Open Street Map NPM Nodejs Plugins
Idea Map
https://github.com/ideabreed/idea-map
The purpose of this library is to combine features of google map such as map, marker and corresponding info window rendering to a single API call. This simplifies implementing google map into your project while not having to remember all the associated API calls provided by it. Just include the script tag into your project and initialize and object of ideaMap class with appropriate parameters while rendering the map. While instantiating the ideaMap class, there are certain parameters that you need to pass according to your requirement. Let’s go over them, Here, we’ve passed in an object while initializing the map.
Usage
Minimum Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import ideaMap from "./lib/ideaMap.js"
var element = document.querySelector('.map-container');
var centerPosition = {lat: 28.3949, lng: 84.1240};
var markerDetails = [
{
icon: "http://maps.google.com/mapfiles/ms/icons/blue.png",
position: {lat: 28.26689, lng: 83.9685},
info: '<h4>Test Marker 1</h4>',
},
{
icon: "http://maps.google.com/mapfiles/ms/icons/green.png",
position: {lat: 27.4368, lng: 85.0026},
info: '<h4>Test Marker 2</h4>',
},
{
icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
position: {lat: 28.8368, lng: 83.0026},
info: '<h4>Test Marker 3</h4>',
}
];
var mapOptions = {
element: element,
center: centerPosition,
markerData: markerDetails,
};
new ideaMap(mapOptions);
Output
Using full features
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import ideaMap from "./lib/ideaMap.js"
var apiKey = "AIzaSyCJBeRKLO65KJR25Zb3HCmPoT1vP4MLX6I";
var element = document.querySelector('.map-container');
var position = {lat: 28.3949, lng: 84.1240};
var zoom = 6;
var type = "google";
var infoWindowMarkup = "<h4>Test Marker</h4>";
var infoWindowEvents = {
show: {
event: "mouseover",
before: function (ideaMarker) {
console.log(ideaMarker)
},
after: function (ideaMarker) {
console.log(ideaMarker)
}
},
hide: {
event: "mouseout",
before: function (o) {
console.log(o)
},
after: function (o) {
console.log(o)
}
},
events: [
{
event: "click",
handler: function (o) {
alert(o.options.infoWindowContent)
}
}
]
};
var markerDetails = [
{
icon: "http://maps.google.com/mapfiles/ms/icons/blue.png",
position: {lat: 28.26689, lng: 83.9685},
info: '<h4>Test Marker 2</h4>',
events: [{
event: 'click',
handler: function (o) {
o.ideaInfoWindow.show();
}
},{
event: 'mouseout',
handler: function (o) {
o.ideaInfoWindow.hide();
}
}, {
event: 'hover',
handler: function (o) {
alert(o.options.info);
}
}]
},
{
icon: "http://maps.google.com/mapfiles/ms/icons/green.png",
position: {lat: 27.4368, lng: 85.0026},
info: infoWindowMarkup
},
{
icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
position: {lat: 28.8368, lng: 83.0026},
info: infoWindowMarkup
}
];
var mapOptions = {
element: element,
center: position,
zoom: zoom,
type: type,
apiKey: apiKey,
markerData: markerDetails,
infoWindowEvents: infoWindowEvents
};
new ideaMap(mapOptions);
- Instantiate and object of ideaMap and provide the object created earlier as an argument
js map = new ideaMap (mapOptions);
Contribution Guidelines
You are welcome to contribute to this library.
Installation
1
yarn install
Run server
1
yarn s
You might also like
Hidden View Helper Methods In Rails
Shiva Bhusal (CTO) 2 Min. Read Oct 1, 2019
rails ruby views helpers
Read More..
Learn Dart Language In One Day
Shiva Bhusal (CTO) 2 Min. Read Sep 4, 2019
Build Mob App Android iOS Dart Flutter Introduction
Read More..
List Of All Municipalities By Districts By Provinces Of Nepal
Shiva Bhusal (CTO) 22 Min. Read Sep 2, 2019
Data Ruby Hash Nepal Districts Municipalities Province
Read More..
Easily Integrate Maps In Your Projects
Shiva Bhusal (CTO) 4 Min. Read Aug 12, 2019
JS Javascript Google Map Open Street Map NPM Nodejs Plugins
Read More..
Read More..
Ruby On Rails Interview Practice Questions And Answers
Shiva Bhusal (CTO) 0 Min. Read Oct 15, 2018
Ruby Rails Interview Questions Practice
Read More..
