Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Samiullah khan
Samiullah khan
Courses Plus Student 5,994 Points

Google Maps Api Integration

I want to have static maps when there is no javascript and use dynamic maps when the is javascript. map api selection

In above screen shot am I doing correct selection? Or should I need the later one.

When I select both then I get error that "api is blocked on your website", But When I select only the later one I get the dynamic but not the static one

2 Answers

Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hi, Samiullah khan:

In order for me, the other moderators, and fellow Treehouse student be in a better position to help you, can you provide me a snippet of the actual code you've typed so far?

You can achieve this using grave characters.

In order to use Google Maps APIs, even for static image generation, make sure you've done the following:

  • You have a Google account and have a valid API key
  • You have a valid address used as a url parameter and are using the correct uri parameter variables names
  • It's correctly interpolated inside quotation marks as a value for the src attribute of the img tag.
Samiullah khan
PLUS
Samiullah khan
Courses Plus Student 5,994 Points
Samiullah khan
Samiullah khan
Courses Plus Student 5,994 Points 
$(".static_map").remove();
    $(".map").prepend("<p id='dynamic_map'></p>");
</script>
<script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByJJ78d8vw2qIRW8lL2I7VuKfsAqppN5U&sensor=false">
      </script>
<script>function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(24.596885,46.745814),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("dynamic_map"),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
      google.maps.event.addDomListener(map,'idle',function(){
         var center = map.getCenter();
      });
      $(window).resize(function(){
         map.setCenter(center);
      });
</script>