GoongMapComponents

Using with CDN

<script src='https://cdn.jsdelivr.net/npm/@goong/[email protected]/dist/goong-maps-component.min.js'></script>
<link href="https://cdn.jsdelivr.net/npm/@goong/[email protected]/dist/goong-maps-component.min.css" rel="stylesheet" type="text/css"/>

Examples

Simple Map

Search Component

Multi Markers

Advance

React Component

Simple Map

Search Component

Multi Markers

Advance

Install

yarn add @goong/map-component

Or

npm install @goong/map-component

Component Examples

import * as GoongMap from "@goong/map-component";
import "@goong/map-component/dist/goong-maps-component.min.css";

function GoongComponentReact(props) {
  const markers = [
    {
      lngLat: [105.4, 21.3],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    },
    {
      lngLat: [105.1, 21.2],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    },
    {
      lngLat: [105.0, 21.0],
      name: "Hà Nội",
      description: "Thành phố Hà Nội, Việt Nam"
    }
  ];

  return (
    <GoongMap.Component
      accessToken="MAP LOAD API KEY",
      zoom={9}
      enabledSearch={false}
      markerIcon={null}
      markerSize={50}
      onSearch={(marker) => {
        console.log(marker);
      }}
      apiKey="SERVICE API KEY"
      leftPane="false"
      center={[105.0,21.0]},
      markers={markers},
      control={true}
    /> 
  );
}

Props

| Key | Type - Description | | ----------- | ----------- | | accessToken | String - API Key for Mapload/Maptile | | zoom | Number - Default Zoom for Init Map | | enabledSearch | Boolean - Enabled Search/Autocomplete on the Map, This requirement with apiKey | | apiKey | String - API Key for call Resfult API | | leftPane | Boolean - Using for having some markers, and you need show list marker then click to going it | | center | LngLatArray - Default center for init Map | | control | Boolean - Show or hidden button zoomin/zoomout in Map | | markers | Array - List of marker for show in Map | | markerIcon | String - URL of icon png for use in Map | | markerSize | Number - Size by pixel for marker icon | | onSearch | Using only for React - handle poi when searching... |

Events

ES5 handle events with method .on("eventName", function(obj){ //... })

| Events | Object | | ------ | ------ | | search | MarkerObj |