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");
};