Easily integrate maps in your projects

4 Min. Read

Aug 12, 2019

JS Javascript Google Map Open Street Map NPM Nodejs Plugins

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

Maintain Multiple Variant Of A Mobile App In Single Git Repo | Mono Repo

Shiva Bhusal (Software Engineer) 1 Min. Read Jan 26, 2021
javascript react react native mono-repo

Hidden View Helper Methods In Rails

Shiva Bhusal (Software Engineer) 2 Min. Read Oct 1, 2019
rails ruby views helpers

There are a lot of Rails view helper methods that are still unknown to most of the Rails developers. They are undocumented in the Rails guide but have good explanation in API Doc though.
Read More..

Learn Dart Language In One Day

Shiva Bhusal (Software Engineer) 2 Min. Read Sep 4, 2019
Build Mob App Android iOS Dart Flutter Introduction

Learn the awesome language Dart for Desktop, Mobile app development in just one day. You must have working knowledge of any language first.
Read More..

List Of All Municipalities By Districts By Provinces Of Nepal

Shiva Bhusal (Software Engineer) 22 Min. Read Sep 2, 2019
Data Ruby Hash Nepal Districts Municipalities Province

Find all the Provinces with districts with all Municipalities in Nepal.
Read More..

Easily Integrate Maps In Your Projects

Shiva Bhusal (Software Engineer) 4 Min. Read Aug 12, 2019
JS Javascript Google Map Open Street Map NPM Nodejs Plugins

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.
Read More..

List Of All Html5 Tags And Css3 Styles With Properties In Array

Shiva Bhusal (Software Engineer) 92 Min. Read Jul 30, 2019
ruby js array html html5 css css3 css3

Summary of the post.
Read More..