Question 263146 in Azure Question posted in
The official documentation to get you started can be found here.

Azure – Add Bings maps to html js

Error ImageI used the below code and passed location.
But it doesn’t return any map.I replaced "New York" with variable.
console.log does show the value but somehow map is not being displayed.

https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/search-module-examples/basic-geocode-example

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <body>
Location: <input type="text" name="a" id="a"><br>
<button onclick="GetMap(document.getElementById('a').value )">Submit</button>
</body>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map, searchManager;
 
    function GetMap(qry) {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'MY Key'
        });
var qry1=qry;
        //Make a request to geocode New York, NY.
 
        geocodeQuery(qry1);

    }

    function geocodeQuery(query) {
console.log(query);
        //If search manager is not defined, load the search module.
        if (!searchManager) {
            //Create an instance of the search manager and call the geocodeQuery function again.
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                searchManager = new Microsoft.Maps.Search.SearchManager(map);
                geocodeQuery(query);
            });
        } else {
            var searchRequest = {
                where: query,
                callback: function (r) {
                    //Add the first result to the map and zoom into it.
                    if (r && r.results && r.results.length > 0) {
                        var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                        map.entities.push(pin);

                        map.setView({ bounds: r.results[0].bestView });
                    }
                },
                errorCallback: function (e) {
                    //If there is an error, alert the user about it.
                    alert("No results found.");
                }
            };

            //Make the geocode request.
            searchManager.geocode(searchRequest);
        }
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map, searchManager;

  function Search() {
        if (!searchManager) {
            //Create an instance of the search manager and perform the search.
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                searchManager = new Microsoft.Maps.Search.SearchManager(map);
                Search()
            });
        } else {
            //Remove any previous results from the map.
            map.entities.clear();

            //Get the users query and geocode it.
            var query = document.getElementById('searchTbx').value;
            geocodeQuery(query);
        }
    }

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'Bing Key'
        });

        //Make a request to geocode New York, NY.
        geocodeQuery("New York, NY");
    }

    function geocodeQuery(query) {
        //If search manager is not defined, load the search module.
        if (!searchManager) {
            //Create an instance of the search manager and call the geocodeQuery function again.
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                searchManager = new Microsoft.Maps.Search.SearchManager(map);
                geocodeQuery(query);
            });
        } else {
            var searchRequest = {
                where: query,
                callback: function (r) {
                    //Add the first result to the map and zoom into it.
                    if (r && r.results && r.results.length > 0) {
                        var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                        map.entities.push(pin);

                        map.setView({ bounds: r.results[0].bestView });
                    }
                },
                errorCallback: function (e) {
                    //If there is an error, alert the user about it.
                    alert("No results found.");
                }
            };

            //Make the geocode request.
            searchManager.geocode(searchRequest);
        }
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
    <input id='searchTbx' type='text'/>
    <input type='button'value='Search' onclick='Search()'/>
    <br/>
    <div id="myMap" style="position:relative;width:600px;height:400px;float:left;"></div>
    <div id='output' style="margin-left:10px;float:left;"></div>
</body>
</html>

  2. 0

    In the <head> section of the HTML document should not contain a <body> tag. Move the body-related HTML elements to the <body> section.

    • You are trying to create a map with the ID myMap, but I didn’t see the HTML element with that ID. You need to add a div element with the ID myMap to your HTML.

    Updated code:

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    Location: <input type="text" name="a" id="a"><br>
    <button onclick="GetMap(document.getElementById('a').value)">Submit</button>

    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>

    <script type='text/javascript'>
        var map, searchManager;

        function GetMap(qry) {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Au7sMtQzyQZRzuQ2krOIbZg8j2MGoHzzOJAmVym6vQjHq_BJ8a1YQGX3iCosFh8u'
            });
            var qry1 = qry;
            geocodeQuery(qry1);
        }

        function geocodeQuery(query) {
            console.log(query);
            if (!searchManager) {
                Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                    searchManager = new Microsoft.Maps.Search.SearchManager(map);
                    geocodeQuery(query);
                });
            } else {
                var searchRequest = {
                    where: query,
                    callback: function (r) {
                        if (r && r.results && r.results.length > 0) {
                            var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                            map.entities.push(pin);
                            map.setView({ bounds: r.results[0].bestView });
                        }
                    },
                    errorCallback: function (e) {
                        alert("No results found.");
                    }
                };
                searchManager.geocode(searchRequest);
            }
        }
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</body>
</html>
    • I updated the script source to use HTTPS for loading the Bing Maps API and also I made to call GetMap as the callback parameter in the script source to ensure that the map is initialized after the Bing Maps API is loaded.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search