Forum:

HTML Pages with CSS and JavaScript

message: initMap is not a function

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am trying to show map using Google Maps

I created an api key on Google Cloud Console and activated it. Next , I gave references as below using the key :

Also ,I created div as below :

Below are the Map.js contents :

However the map is not displayed and on clicking the chrome debugger it shows the below error

Thanks.

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

In your url you told Maps that you had a callback named initMap that you wanted it to call. But you have no such function. So you should not be surprised that there's a complaint.

If you don't need to call the callback, remove that portion of the url.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks .I removed the callback and made it like below

Now , I get the below message :

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 4 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

You are likely executing your script before the DOM loads, so the div doesn't exist yet.

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks. By changing the order I could get rid of the error message. I am getting no errors now.
However no Map gets displayed.

In the body I have :

Followed by :

And I have the below in the head section

So now , there is no error but no Map displayed .
I am using Dot Net Core so it is a cshtml page , if it can be related to the issue.

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

To try and isolate the issue ,I did like below

When I debug initially it shows 'Test'.

However 'Test' disappears when below line gets executed :

I was expecting that when this line executes it will replace the 'Test' with the Map .However ,Test disappears but no Map gets displayed .

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Do you have CSS that gives the div a non-zero area?

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Yes.Below is the css entry :

I think to isolate this issue I can try the HTML code (map div) in a new cshtml page (instead of existing ) and see if it works .

Norm Radder

Rancher

Posts: 5114

posted 4 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Should the map = statement and following be in an initMap function that is set to be the callback?

This site has an example: https://codepen.io/robey/pen/QyewZw

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Norm Radder wrote:Should the map = statement and following be in an initMap function that is set to be the callback?

This site has an example: https://codepen.io/robey/pen/QyewZw

Thanks.I will check this too.

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have identified where problem is but don't know what the exact reason is.

First, I created a new CSHTML page and tried.

The same result.Test disappeared and Map did not get displayed.

Next, instead of using the existing css (namely site.css) with entry I removed its reference and created a brand new CSS (namely Map.css) and gave it's reference.

It works fine this time and loaded the map.

Below is the Map.css

Below is the site.css (the last line has entry for #Map)

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    background-image: url('/images/pattern.png');
    background-repeat: repeat;
    font-family: 'Source Sans Pro', sans-serif;
}

.slide-image {
    width: 100%;
}

.carousel-holder {
    margin-bottom: 30px;
}

.carousel-control,
.item {
    border-radius: 4px;
}

.caption {
    height: 130px;
    overflow: hidden;
}

.caption h4 {
        white-space: nowrap;
    }

.thumbnail img {
    width: 100%;
}

.addToCart {
    padding-right: 10px;
    padding-left: 10px;
}

.thumbnail {
    padding: 0;
}

.thumbnail .caption-full {
        padding: 9px;
        color: #333;
    }

footer {
    margin: 50px 0;
}

.navbar {
    background-image: none;
}

.navbar-inverse {
    background-color: #a593c2;
    border-color: #a593c2;
}

.nav.navbar-nav.navbar-right li a {
    color: white;
    font-size: 1.2em;
}

.navbar .nav > li > a {
    font-size: 1.2em;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    color: white;
}

.carousel .item {
    height: 400px;
}

.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 400px;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    background-color: #fcaeae !important;
    border-color: #fba1a1 !important;
}

.btn {
    background-color: #fcaeae !important;
    border-color: #fba1a1 !important;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

.navbar {
    margin-left: -15px;
    margin-right: -15px;
    overflow: hidden;
    background-color: #333;
}

.navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

.subnav {
    float: left;
    overflow: hidden;
}

.subnav .subnavbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: #99A3A4;
        font-family: inherit;
        margin: 0;
    }

.navbar a:hover, .subnav:hover .subnavbtn {
        background-color: #CB4335;
    }

.subnav-content {
    display: none;
    left: 0;
    background-color: #CB4335;
    width: auto;
    z-index: 0;
    position: fixed
}

.subnav-content a {
        float: left;
        color: white;
        text-decoration: none;
    }

.subnav-content a:hover {
            background-color: #eee;
            color: black;
        }

.subnav:hover .subnav-content {
    display: block;
}

#ajaxSpinnerImage {
    display: none;
}

#map {
    height: 100%;
}

Norm Radder

Rancher

Posts: 5114

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Can you post the full html page that shows the initMap function and the other script code?

Have you tried using the Developer / debug features of a browser?

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Below is the original cshtml page.

As I said ,the map displayed only on creating a new cshtml page with new css reference .

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <script src="https://maps.googleapis.com/maps/api/js?key=MyKey"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

</head>
<body>
    
    <div>
        <div class="subnav">
            <button onclick="location.href='/Home'" class="subnavbtn">Home <i class="fa fa-caret-down"></i> </button>
        </div>
        <div class="subnav">
            <button id="CategoriesButton" class="subnavbtn">Categories <i class="fa fa-caret-down"></i></button>
            <div id="CategoriesList" class="subnav-content">
            </div>
        </div>
        <div id="PiesMenuButton" class="subnav">
            <button class="subnavbtn">Pies <i class="fa fa-caret-down"></i> </button>
        </div>
        <div id="PiesOfTheWeekMenuButton" class="subnav">
            <button class="subnavbtn">Pies of the week <i class="fa fa-caret-down"></i> </button>
        </div>
    </div>
    <div id="categoryName"></div>
    <div class="d-flex justify-content-center" class="container">
        <div class="col-md-6">
            <p class="lead">
                <img class="img-responsive" alt="Pie Shop'" src="~/Images/MyPieShopLogo.jpg" />
            </p>
        </div>
        <div id="map">Test</div>
        <div>
            @RenderBody()
        </div>

</div>
    <div id="ajaxSpinnerContainer">
        <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
    </div>

The above cshtml with the above big css does not work .However the new cshtml page with just the map div and reference to new small css (map.css) works fine.I am not sure what is the exact css problem.

Norm Radder

Rancher

Posts: 5114

posted 4 years ago

1
Number of slices to send:

Optional 'thank-you' note:

Send

Where is the initMap function with the map = new google.maps.Map(document.getElementById("map"), {... defined?
Have you looked at this site: https://developers.google.com/maps/documentation/javascript/geolocation

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks a lot

Implementing the code from the link you provided worked perfectly.

I was initially referring to a different link ,which also was from developers.google

The link you provided (and worked fine)

https://developers.google.com/maps/documentation/javascript/geolocation

The link I was trying

https://developers.google.com/maps/documentation/javascript/overview#all

The second link which I was initially attempting was bit different.

For example the first one has :

Whereas the second one has

That's not the only difference though.. I am wondering if it is also for the same purpose then why slightly different .

Thanks

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have a doubt. If I remove the below code from the head section:

And add the below to the css of my application site.css :

Then it stops displaying the map.

It means I have some entry in my site.css which is not allowing the above to show its affect.

So, does that mean on specifying a css style in head section , it enforces it (despite any such problem with the site.css )?

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It most likely means that site.css isn't loading.

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2966

posted 4 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

But I think thats not a possibility because site.css starts with giving background image to the page and if I comment that line background image won't show up. So it is taking the background image surely from site.css

Below is the code for top most part of site.css.(The complete code for the file I had pasted few posts above ):

Don't get me started about those stupid light bulbs.