Google Maps not working in content template

I tried to follow the instructions on the page that you guys have on how to insert google maps based on latitude and longitude points. However, the map isn't showing up at all. I have gone into View settings to make sure that the "activate map" box is checked.

Here is the JS code:

jQuery( document ).ready(function($) {
  $("#js-main-map-canvas").wpvmap();
});

Here is what I put into the HTML section of the template:

<div id="js-map-element"
     class="restaurantmap"
     data-marker-title='[wpv-post-title]'
     data-marker-lat='[types field="latitude" format="FIELD_NAME: FIELD_VALUE"][/types]'
     data-marker-lon='[types field="longitude" format="FIELD_NAME: FIELD_VALUE"][/types]'>
    <h1>[wpv-post-title]</h1>
    <div id="js-main-map-canvas" class="google-maps"></div>
</div>

And here is my restaurantmap css:

.restaurantmap {
  width:200px;
  height:200px; 
  float:right;
  margin-top:-50px;
}

t.
to see the issue: if you go to this page: www.paleoprovidence.com/find-paleo, and just hit the "find me paleo" button and get a bunch of search results, click on any of the first few that come up and, when you go to the locations/hours tab, the map should show up there on the lower right…but all I get is just the title of the restaurant in its place. It's as if the JS is not calling the map correctly. I have the latitude and longitude points entered in correctly.