Jump to content

Recommended Posts

I got the code below from W3Schools tutorial on Google maps.  I also received an API code from google.  When I try to put this on my site I get an error message in what looks like an iframe.  I think I am suppose to do something additional with my api code.  Google had me set a project name and then just generated a code.  I don't know if I am suppose to do something besides generate that code in order for it to work for the specific map I want on my site. Can anyone tell me something obivous I am doing wrong or something that I still need to do on google?

<script>
function myMap() {
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARr9stC0XnoFmg2DEqjj5U8sTC_nkvg0A&q&callback=myMap"></script>
  <iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?AIzaSyARr9stC0XnoFmg2DEqjj5U8sTC_nkvg0A&q=Wayne+State+University" allowfullscreen>
</iframe>

Share this post


Link to post
Share on other sites

It would be helpful to know what the error message says.

Share this post


Link to post
Share on other sites

I also forgot to put this at the top of the code:  <div id="googleMap" style="width:100%;height:400px;"></div> in my example above.  It doesn't actually say anything but I've attached a picture.  The map works for a moment and then I get the error.  Which makes me think my code is right but I just don't know how to use my api from Google. 

error Google maps.PNG

Share this post


Link to post
Share on other sites

You have to login to google and create a project then select get JavaScript API under MAPS, you are then create a API key, which you use in your coding. The Iframe embed is similar, but apparently you have to create a secondary API key to ref. After that they should both show. Just follow instructions.

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×