• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Jeanne Boyarsky
  • Liutauras Vilda
Sheriffs:
  • Rob Spoor
  • Bear Bibeault
  • Tim Cooke
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Piet Souris
Bartenders:
  • Frits Walraven
  • Himai Minh

message: initMap is not a function

 
Ranch Hand
Posts: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.

 
Sheriff
Posts: 67537
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Monica Shiralkar
Ranch Hand
Posts: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks .I removed the callback and made it like below


Now , I get the below message :



 
Bear Bibeault
Sheriff
Posts: 67537
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You are likely executing your script before the DOM loads, so the div doesn't exist yet.
 
Monica Shiralkar
Ranch Hand
Posts: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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: 67537
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Do you have CSS that gives the div a non-zero area?
 
Monica Shiralkar
Ranch Hand
Posts: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 .
 
Rancher
Posts: 4307
38
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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)

 
Norm Radder
Rancher
Posts: 4307
38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Below is the original cshtml page.

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




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: 4307
38
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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: 67537
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It most likely means that site.css isn't loading.
 
Monica Shiralkar
Ranch Hand
Posts: 2449
13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ):
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic