MissingKeyMapError when configuring Google Maps AP

Question

I am trying to configure the Google Maps API key on my website like this:

<div class="rd-google-map">
  <div class="border-bottom"></div>
  <div id="google-map" class="rd-google-map__model" data-zoom="10" data-x="77.079627" data-y="28.643150"></div>
  <ul class="rd-google-map__locations">
    <li data-x="77.079627" data-y="28.643150">
      <p>58, Ist Floor, DDA Local Shopping Centre, Block J, Vikaspuri, Delhi, 110018</p>
    </li>
  </ul>
</div>

I get the following error:

"Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error  http://maps.google.com/maps/api/js:34"

The URl is dranandspetsclinic.com/new/.

Answer 1

Open js/script.js and search for a line with something like this

$.getScript("http://maps.google.com/maps/api/js?sensor=false&libraries=geometry,places&v=3.7&key=ADD_YOUR_KEY_HERE", function ()

and add the &key=your_key_here from https://developers.google.com/maps/documentation/javascript/get-api-key?refresh=1