title: Google maps "For developement purposes only"
body: <p>My google map is not showing correctly. It shows "for development purposes only" and google says I need to create and enable a billing account and create an API key. I have done this but do I need to change or add something in the code?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> // Get the HTML DOM element that will contain your map
   // We are using a div with id="map" seen below in the &lt;body&gt;
   var mapElement = document.getElementById('map');
  
   var map = new google.maps.Map(mapElement, mapOptions);
   var image = 'http://filmservice.no/wp-content/themes/filmservice16/img/ikon/map-marker.png';
   var marker = new google.maps.Marker({
    position: new google.maps.LatLng(59.969826, 10.905725),
    animation: google.maps.Animation.DROP,
    map: map,
    icon: image,
    title: 'Filmservice AS'
   });
   
  function toggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }</code></pre>
  </div>
  </div>
  </p>