mgn-gmaps

Implement Google Maps API. You can get Google Maps API key from here.

• Target browser : IE11+

---

Install

npm i mgn-gmaps -S

Or Download raw data

↓ download "mgn-gmaps.js"

---

Import

import mgnGmaps from 'mgn-gmaps';

Prepare an element with latitude, longitude, zoom level initially displayed in data attribute.

<div class="[className]" data-lat="[緯度]" data-lng="[経度]" data-zoom="[ズームレベル]"></div>

---

Constructor

new mgnGmaps( element [, option] )

Argument	Data type	Default	Descroption
element	String	-(Required)	Specify target element. ex) ".j-maps"
option	Object	-	option = { 　scrollwheel: true, 　zoom: { 　　default: 17, 　　min: 2, 　　max: 20 　}, 　pin: { 　　icon: "./images/flag.png", 　　width: 60, 　　height: 60, 　　animation: 'BOUNCE' 　}, 　responsive: { 　　breakpoint: 640, 　　zoom: { 　　　default: 14, 　　　min: 5, 　　　max: 18 　　}, 　　pin: { 　　　width: 20, 　　　height: 20 　　} 　}, 　styles: { 　　pattern: "mono", 　　original: [ 　　　{ 　　　　featureType: "all", 　　　　elementType: "all", 　　　　stylers: [ 　　　{　hue: "#ec4501"　} 　　　　] 　　　} 　　] 　}, 　mapTypeControl: true, 　mapTypeControlOptions: { 　　mapTypeIds: [ 　　　google.maps.MapTypeId.ROADMAP, 　　　google.maps.MapTypeId.HYBRID 　　], 　　style:google.maps.MapTypeControlStyle.DROPDOWN_MENU 　} }

option	Data type	Default	Descroption
scrollwheel	Boolean	false	Specify whether to use mouse wheel zoom.
zoom	Object	{ default: 14, min: 2, max: 20 }	Specify default/minium/maximum zoom level.
pin	Object	-	Specify the path and size of the original pin image.
responsive	Object	-	Specify breakpoint, zoom level and original pin image for responsive time.
styles	Object	-	pattern can be specified as "mono", "sepia" or "retro". original can be specified with json code.
mapTypeControl	Boolean	false	Specify whether to use map type control.
mapTypeControlOptions	Object	-	Specify options for map type control.

---

Method

Method	Argument	Descroption
CreateEnd = function(){};	-	To be executed after map is created.

---

Demo

https://frontend-isobar-jp.github.io/mgn-gmaps/

import mgnGmaps from './mgn-gmaps';

let gmaps = new mgnGmaps(
    ".j-maps",
    {
        scrollwheel: true,
        zoom: {
            default: 17,
            min: 3,
            max: 18,
        },
        pin: {
            icon: "./images/pin.svg",
            width: 36,
            height: 50,
            animation: 'BOUNCE'
        },
        responsive: {
            breakpoint: 640,
            zoom: {
                default: 15,
                min: 5,
                max: 18,
            },
            pin: {
                width: 18,
                height: 25
            }
        },
        styles: {
            pattern: "mono"
        },
        mapTypeControl: true, //マップタイプコントロールの有無を指定できます。 true or false デフォルトはfalse
        mapTypeControlOptions: {
            mapTypeIds: [
                google.maps.MapTypeId.ROADMAP,
                google.maps.MapTypeId.HYBRID
            ],
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    }
);

gmaps.CreateEnd = function(){
    console.log("CreateEnd");
};