How to Embed Map on a Website or App Using NextBillion.ai API in 10 Minutes

In this technical blog, we will guide you through the process of adding a map to your website or app using the NextBillion.ai API in just 10 minutes.

This content was originally posted HERE

We will cover the necessary steps to integrate the API, including obtaining an API key, and the code snippets required to display the map on your website or app.

By the end of this tutorial, you will have a fully functional map on your website or app, which you can customize to fit your needs. So, whether you’re a developer looking to embed a map feature to your project or a business owner looking to add a map to your website, this tutorial is for you.

Let’s get started!

How to embed a map on a website step-by-step guide

Embedding a map to a website can greatly enhance the user experience and provide valuable context for your content. One way to quickly and easily add a map to your website is by using NextBillion.ai ’s API.

To add a map to your website within 10 minutes using NextBillion.ai API, you can follow these steps:

Sign up for a trial API key on the NextBillion.ai website. This key will be used to authenticate your requests to the API.
Include the NextBillion.ai API javascript library in the head of your HTML document:


1. <script src="https://maps-gl.nextbillion.io/maps/v2/api/js"></script>

This library provides the necessary functionality to interact with the API and display the map on your website.

Create a div element in your HTML document where you want the map to be displayed:


1. <div id="map"></div>

This div will act as a container for the map, and its ID should be set to “map” for the initialization function to work correctly.

Initialize the map in your javascript:


1. nb.maps.init(
2. { apiKey: 'YOUR_API_KEY', 
3.   elementId: 'map', 
4.   center: [LATITUDE, LONGITUDE], 
5.   zoom: ZOOM_LEVEL 
6. }
7. );

Initialize the map in your javascript by calling the nb.maps.init() function and passing in a configuration object containing your API key, the ID of the div element, and the desired center and zoom level for the map.

Replace ‘YOUR_API_KEY‘ with your actual API key, set the center to the latitude and longitude you want the map to center on, and set the zoom level to the desired value.
Add some styles to the div


1. #map{ 
2.   width:100%; 
3.   height:500px; 
4. }

You can use CSS to style the div element and adjust the size of the map to fit your website layout.

Overall, this is a simple and easy way to add a map to your website using NextBillion.ai API. With just a few lines of code, you can quickly and easily integrate a fully-functional map into your website, and customize it to suit your needs.

How to embed a map into an app using NextBillion.ai Maps API in just ten minutes (Step-by-step Guide)

In this section of this technical blog post, we will be discussing how to integrate a map into an app using NextBillion.ai Maps API in just ten minutes.

NextBillion.ai offers a wide range of mapping services and functionalities that can be easily integrated into any app, making it a great choice for developers.

Step 1: Sign up for a NextBillion.ai account and log in.

Step 2: Once logged in, navigate to the Maps API section and generate an API key. This key will be used to authenticate your app and allow it to access the mapping services provided by NextBillion.ai.

Step 3: Import the necessary libraries for the map functionality, such as NextBillion.ai Maps SDK, into your app. These libraries provide the necessary tools and functions to implement the map functionality.

Step 4: Initialize the map and set the API key in the appropriate configuration file. This will be done differently depending on the platform you are using (iOS or Android).

Step 5: Add a map view to the layout of your app and connect it to the code. This is typically done through the use of XML layout files or storyboards.

Step 6: Use the map’s functions, such as moveCamera and addMarker, to customize the map according to your needs. These functions allow you to control the camera’s position, add markers and other overlays to the map, and more.

Step 7: Test the map functionality in the app by simulating or running it on a device. This will allow you to ensure that the map is working as expected and that there are no issues with the implementation.

Step 8: Integrate any additional features or customization as needed. This could include adding custom markers, creating custom overlays, or adding additional map layers.

Step 9: You have successfully integrated NextBillion.ai Maps API in your app and now you can use maps in your app.

In conclusion, integrating a map into an app using NextBillion.ai Maps API is a straightforward process that can be completed in just ten minutes. The platform offers a wide range of mapping services and functionalities that can be easily integrated into any app, making it a great choice for developers. Keep in mind, the above steps may vary depending on the platform and specific implementation. This is just a general guide.

How to integrate a map into a Flutter app using NextBillion.ai Maps API in just ten minutes

Integrating a map into a Flutter app can greatly enhance the user experience, allowing for location-based features such as showing nearby locations or providing directions.

One option for adding a map to your app is using the NextBillion.ai Maps API. In this section of the blog post, we’ll show you how to integrate a NextBillion.ai map into your Flutter app in just ten minutes.

Before getting started, you’ll need to sign up for a trial API key on the NextBillion.ai website. Once you have your API key, you can begin the integration process.

Step 1: Install the package

First, you’ll need to add the nextbillion_maps package to your pubspec.yaml file. This package provides the necessary code to interact with the NextBillion.ai Maps API.


1. flutter pub add @nbai/nbmap-gl

Step 2: Import the package

Next, in your Dart code, you need to import the package:


1. import 'package:flutter/material.dart';
2. import 'package:nbmap_gl/nbmap_gl.dart';

In your app’s build method, you can add a NextBillionMap widget.


1. class MyApp extends StatefulWidget {
2.   @override
3.   _MyAppState createState() => _MyAppState();
4. }

It defines a Flutter widget called ‘MyApp’ which is a ‘StatefulWidget’.

In Flutter, a StatefulWidget is a widget that can change its state during the lifetime of the app. The MyApp widget creates an instance of a ‘separate _MyAppState’ class that holds the mutable state of the MyApp widget.

The @override annotation before the createState() method is a Dart feature that indicates that this method is intended to override a method with the same name that is defined in the parent class StatefulWidget.

The createState() method is a factory method that returns a new instance of the _MyAppState class. This method is called by the framework when the MyApp widget is first created.

In other words, this code creates a new class MyApp that extends StatefulWidget and is able to change its internal state, it also creates a new class _MyAppState that holds the internal mutable state of the MyApp class.

Step 4: Add some styles

Finally, you can add some styles to the map to ensure it fits well within your app’s layout.


1. class _MyAppState extends State {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Scaffold(
5.       body: NBMap(
6.         apiKey: 'your-api-key',
7.         initialZoom: 12,
8.         styleJson: 'https://api.nextbillion.io/maps/streets/style.json',
9.         initialPosition: LatLng(34.08572, -118.324569),
10.       ),
11.     );
12.   }
13. }

The build method returns a Scaffold widget, which is a basic layout structure in Flutter. The body property of the Scaffold widget is set to an instance of the NBMap widget. The properties apiKey, initialZoom, styleJson, and initialPosition are passed as arguments to the NBMap widget to configure the map.

The ‘Scaffold’ widget provides a basic layout structure and can be used to create a consistent layout across an app. It can also be used to provide common functionality such as a drawer, bottom sheet, and app bar.

When the ‘build’ method is called, the framework uses the returned widget tree to create the elements on the screen, and it will automatically call the build method again if the state of the _MyAppState class changes.

In summary, the code snippet provided defines a stateful widget in Flutter, by creating a new class MyApp that extends StatefulWidget and is able to change its internal state, it also creates a new class _MyAppState that holds the internal mutable state of the MyApp class, and uses the build method to create the user interface of the widget.

Note that this is just an example and may require additional adjustments to work properly in your specific use case.