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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...