Jump to content

Google Maps API


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?

function myMap() {
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

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

Link to comment
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

Link to comment
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
Link to comment
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
  • Create New...