【Introduction to the Cloud】Getting Started with the Azure Maps API - PrismScaler | 【Official】 Definer Inc.

1. Introduction

Hello! We are a writer team from Definer Inc.
In this issue, you are wondering about the use of Azure Maps API.
Let's take a look at the actual screens and resources to explain in detail.

2. Purpose/Use Cases

This article summarizes information and practices that can be helpful when you want to leverage location information using the Azure Maps API.

3. What is Azure Maps?

First, let's review Azure Maps.

Azure Maps is a service that makes it easy to integrate location data into web and mobile applications.
It provides comprehensive coverage of APIs and SDKs, and includes the following features
・Map display
・Search (restaurants, gas stations, etc.)
・Location information
・Traffic information
・Weather
・Elevation
・Aerial photos

4. Try the Azure Maps API

Now, let's try Azure Maps API.

(1) Create an Azure Maps account
(Must be created separately from your Azure account)
You can access the Azure console and activate it from the Azure Maps screen.

(2) Issuance of key
Since the key will be embedded later, please note the key information from the Azure Maps screen.

(3) Creation of front end
Create the front end by referring to the following file.
Embed the key mentioned earlier in Azure Maps Key.

<!DOCTYPE html>
 <html>
 <head>
     <title>Map Search</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
     <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
     <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
     <script>
     function GetMap(){
       var map = new atlas.Map("myMap", {
            view: 'Auto',
           authOptions: {
               authType: 'subscriptionKey',
               subscriptionKey: '${Azure Maps Key}'
           }
       });
     }
     </script>
     <style>
         html,
         body {
             width: 100%;
             height: 100%;
             padding: 0;
             margin: 0;
         }
         #myMap {
             width: 100%;
             height: 100%;
         }
     </style>
 </head>
 <body onload="GetMap()">
     <div id="myMap"></div>
 </body>
 </html>

Map is displayed!

5. Cited/Referenced Articles

Adding a Horizontal Bar Chart Layer to Azure Maps Power BI Visual Effects ...
Azure Maps Power BI Visual Effects Overview - Microsoft Azure ...
Introducing Azure Maps iOS SDK with SwiftUI | DevelopersIO
Azure Maps Documentation | Microsoft Docs
Tutorial: Find nearby destinations using Azure Maps
Azure Maps - Geospatial Mapping API | Microsoft Azure
Overview of Microsoft Azure Maps | Microsoft Docs

6. About the proprietary solution "PrismScaler"

・PrismScaler is a web service that enables the construction of multi-cloud infrastructures such as AWS, Azure, and GCP in just three steps, without requiring development and operation.
・PrismScaler is a web service that enables multi-cloud infrastructure construction such as AWS, Azure, GCP, etc. in just 3 steps without development and operation.
・The solution is designed for a wide range of usage scenarios such as cloud infrastructure construction/cloud migration, cloud maintenance and operation, and cost optimization, and can easily realize more than several hundred high-quality general-purpose cloud infrastructures by appropriately combining IaaS and PaaS.

7. Contact us

This article provides useful introductory information free of charge. For consultation and inquiries, please contact "Definer Inc".

8. Regarding Definer

・Definer Inc. provides one-stop solutions from upstream to downstream of IT.
・We are committed to providing integrated support for advanced IT technologies such as AI and cloud IT infrastructure, from consulting to requirement definition/design development/implementation, and maintenance and operation.
・We are committed to providing integrated support for advanced IT technologies such as AI and cloud IT infrastructure, from consulting to requirement definition, design development, implementation, maintenance, and operation.
・PrismScaler is a high-quality, rapid, "auto-configuration," "auto-monitoring," "problem detection," and "configuration visualization" for multi-cloud/IT infrastructure such as AWS, Azure, and GCP.

開発者ブログ

【Introduction to the Cloud】Getting Started with the Azure Maps API - PrismScaler

目次