CODEWITHSUNDEEP
javascriptc#asp.net
Fatema
Fatema

Reputation: 1

Integrating Bing Maps in Asp.net C# Web application

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="map.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>  
      <script type="text/javascript">

        function GetMap() {
            var key = "Key";
            var mapOptions = { credentials: key, mapTypeId: Microsoft.Maps.MapTypeId.road, zoom: 5 }
            var infobox = null;

            var map = new Microsoft.Maps.Map('#myMap', mapOptions);
        }
            function showInfobox(e) {
                if (e.target.metadata) {
                    infobox.setOptions({
                        location: e.target.getLocation(),
                        title: e.target.metadata.title,
                        description: e.target.metadata.description,
                        visible: true
                    });
                }
            }

            function hideInfobox(e) {
                infobox.setOptions({ visible: false });
            }

            function addMarker() {
                var marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(20.296059, 85.824539), { color: 'green' });

                infobox = new Microsoft.Maps.Infobox(marker.getLocation(), {
                    visible: false
                });

                marker.metadata = {
                    id: 1,
                    title: 'Bhubaneswar',
                    description: 'Bhubaneswar, Odisha'
                };

                Microsoft.Maps.Events.addHandler(marker, 'mouseout', hideInfobox);
                Microsoft.Maps.Events.addHandler(marker, 'mouseover', showInfobox);

                infobox.setMap(map);
                map.entities.push(marker);
                marker.setOptions({ enableHoverStyle: true });
            };

    </script>
</head>
<body onload="GetMap();">
    <div id="myMap" style='position: relative; width: 600px; height: 800px;'></div>
 <input type="button" value="Show Points" onclick="addMarker();" />
    <form id="form1" runat="server">

        </form>
</body>
</html>

This is my code of Webform1.aspx. My Map is loaded successfully but no marker is shown on clicking the Show Points button. In the console, I am getting the following error on page load

WebForm1.aspx:35 Uncaught ReferenceError: Microsoft is not defined
    at addMarker (WebForm1.aspx:35)
    at WebForm1.aspx:77
and on clicking show points button, I am getting the following error.
Uncaught ReferenceError: map is not defined
    at addMarker (WebForm1.aspx:50)
    at HTMLInputElement.onclick (WebForm1.aspx:62)

I want to show a map on my webform with some points marked on the map. The latitude and longitude for those points are supposed to come from the database.

Upvotes: 0

Views: 688

Answers (1)

L0uis
L0uis

Reputation: 721

Welcome to stack overflow. Your map loading is async defer so there's no guarantee that the namespace Microsoft is available when its called in your function:

<body onload="GetMap();">

Use the callback you have defined in the script include tag:

loadMapScenario

This will run when the Microsoft js lib is finished loading.

Upvotes: 1

Related Questions