Google Maps API Error: Oops! Something went wrong

smile
 
on Oct 01, 2021 09:56 PM
358 Views

I read your article from this is link 

Display Google Map inside ASP.Net ListView based on Latitude Longitude values using JavaScript and jQuery

I am trying to implement same code like this way using Master Page 

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="Contact.aspx.cs" Inherits="Contact" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<div class="header">
<h1>Schoool Management System</h1>
</div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h2>Contact</h2>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=myMap"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div[class=col-md-4]").each(function () {
                var latLong = $(this).find('[id*=Label2]').html();
                var mapDiv = $(this).find('[id*=googleMap]');
                ShowMap(latLong.split(',')[0], latLong.split(',')[1], mapDiv);
            });
        });
        function ShowMap(lat, long, div) {
            var LatLng = new google.maps.LatLng(lat, long);
            var mapOptions = { center: LatLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
            var map = new google.maps.Map(div[0], mapOptions);
            var marker = new google.maps.Marker({ position: LatLng, map: map, title: "<div style = 'height:30px;width:200px'><b>Latitude : </b>" + lat + "<br/><b>Longitude : </b>" + long + "</div>" });
            google.maps.event.addListener(marker, "click", function (e) {
                var infoWindow = new google.maps.InfoWindow();
                infoWindow.setContent(marker.title);
                infoWindow.open(map, marker);
            });
        }
    </script>

     <asp:ListView ID="ListView1" runat="server">
        <ItemTemplate>
            <div class="col-md-4">
                <div class="item border-3px border-theme-colored p-40 mb-sm-30" style="height: 100%">
                    <div class="icon-box text-center pl-0 pr-0 mb-0">
                        <a class="icon icon-circled icon-border-effect effect-circle icon-xl" href="#"><i
                            class="flaticon-salon-hairdresser-washing-the-hair-of-a-client-with-bubbles-shampoo text-theme-colored">
                        </i></a>
                        <h4 class="icon-box-title mt-15 mb-10 letter-space-4 text-uppercase">
                            <a href="#"><strong>
                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                            </strong></a>
                        </h4>
                        <p><asp:Label ID="Label2" runat="server" Text='<%# Eval("address") %>'></asp:Label></p>
                        <p>SEE ON MAP</p>
                        <div id="googleMap" style="width: 100%; height: 200px;"></div>
                    </div>
                </div>
                <br />
            </div>
        </ItemTemplate>
    </asp:ListView>

</asp:Content>

it is showing me nothing. screenshoot is attached.

https://imgur.com/UFW9glt

how to get solution?

Download FREE API for Word, Excel and PDF in ASP.Net: Download
Andrea
 
on Oct 01, 2021 09:56 PM
smile
 
on Oct 01, 2021 11:49 PM

your reply does not match with my requirements. I already followed it.

dharmendr
 
on Oct 02, 2021 07:41 AM

Check the browser console and send the exact error.

smile
 
on Oct 02, 2021 07:49 AM

How to check the browser console pls guide.