[Jennifer Peebles]

Hi Steve,
I am having a hard time getting the cmap Template to work. I think I have the right API keys in not sure because Google doesn’t list them as browser and server. The whole Google Console is a little confusing but I am verified. Nothing comes up though when I click to show map.
Also, I deleted my categories so that I could reenter them and now the import CSV doesn’t work for categories?

Thanks
Jennifer

[Steven Zahm]

@ Jennifer

re: I think I have the right API keys in not sure because Google doesn’t list them as browser and server. The whole Google Console is a little confusing but I am verified. Nothing comes up though when I click to show map.

Open the business directory page in the Chrome Browser, hit the F12 key and then click the Console tab. You’ll see this error from Google, Google Maps API warning: InvalidKey.

This says the key you have entered is not correct. You can use the error listed in the browser console to help get your maps working.

Google did change their Console a little since I wrote the tutorial. You basically follow the same directions but instead you create two keys. On only one of these keys you add the referer restriction. The one without restriction is the server key, the other will be the browser key.

re: Also, I deleted my categories so that I could reenter them and now the import CSV doesn’t work for categories?

I’ve never run across that before. The code to bulk import categories is completely different and separate from the code to delete categories so their should be no effect. Can you please describe the exact steps you have followed to import categories?

[Jennifer Peebles]

Hielo again,

I’m so sorry but I still can’t get the categories to upload. It doesn’t even map the files. When I press upload it doesn’t do anything. I formatted the CSV to comma and double quote is that correct?
Also, I still haven’t been able to get the maps to work.
And I need you to direct me to the specific doc to customize the connections shortcode.
I “again ” have spent numerous hours trying to figure out what I am doing wrong.
It was working fine before?
I was able to upload some categories when I installed the listings. I am going to try to add them through that upoader.

Jennifer

[Steven Zahm]

@ Jennifer

re: I’m so sorry but I still can’t get the categories to upload. It doesn’t even map the files. When I press upload it doesn’t do anything. I formatted the CSV to comma and double quote is that correct?

If you press the button and nothing happens, that seems to indicate that another plugin or theme is causing a fatal javascript error on the page which stops all javascript from after the error from running. This is just my best guess. If you give me a temp WP admin login, I’ll take a look. The login details can be posted here as a private reply.

Please attach a copy of the CSV file you are trying to upload. Please rename it from .csv to .txt first. Otherwise it will be rejected as an unsafe file type by the forum.

re: I still haven’t been able to get the maps to work.

Open the directory page in Chrome, hit the F12 key and then click the Console tab. Look for the message from Google. These can help you figure out what to do.

Before the message was Google Maps API warning: InvalidKey.

Now it says Google Maps API error: RefererNotAllowedMapError

This tells me that you have the key setup correctly but the referer restriction for the browser API key is not correct.

See this step in the instructions for what I suggest using as the referer restriction.

http://www.roundhoused.com/*

The above referer should work.

re: I need you to direct me to the specific doc to customize the connections shortcode.

The shortcode and its options can be found in the docs, here.

Templates can also have their own specific shortcode options. On the docs table of contents page, click the template name to learn more about its options. Likewise for any of the extensions.

Hope this helps!

[Jennifer Peebles]

Steven,

Ok well the map shows for a second then I get this message.
Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.
You gave me great directions though. thanks I appreciate that!

Jennifer

[Jennifer Peebles]

Steven,

I wanted to add that I have tried using the api’s with other plugins and they worked fine.
Also can I add this code to the plugin once I get it working?

<div id=”map”></div>

<script>
  function initMap() {
    var chicago = {lat: 41.85, lng: -87.65};
    var indianapolis = {lat: 39.79, lng: -86.14};

    var map = new google.maps.Map(document.getElementById('map'), {
      center: chicago,
      scrollwheel: false,
      zoom: 7
    });

    var directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    });

    // Set destination, origin and travel mode.
    var request = {
      destination: indianapolis,
      origin: chicago,
      travelMode: 'DRIVING'
    };

    // Pass the directions request to the directions service.
    var directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response, status) {
      if (status == 'OK') {
        // Display the route on the map.
        directionsDisplay.setDirections(response);
      }
    });
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

Thanks

Jennifer

[Steven Zahm]

@ Jennifer

re: I wanted to add that I have tried using the api’s with other plugins and they worked fine.

When I navigate to this page on your site…

Looking at the browser Console, Google is still displaying the InvalidKeyMapError error.

Here’s the link to the Google Docs for this error:

https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

“The API key included in the script element that loads the API is not found. Please make sure you are using a correct API key. You can generate a new API key on the Google API Console.”

The only thing I can say for sure is Google does not like your key or its configuration.

Double check that the key is correct. It has to be exact. You had it closer to being setup correctly when the error message was Google Maps API error: RefererNotAllowedMapError. That meant the key was correct, you needed to fix the referer restriction.

Here’s a suggestion. Create a brand new API key with no restrictions (just for testing) and save that as your browser key in the Connections Settings. After you have a working key, then go back and add the referer restriction.

I recommend using http://roundhoused.com/ as the referrer. The preceding http:// and trailing / are important and should not be left off otherwise your Browser Key may not work because it will not be able to validate the referrer.

Hope this helps!

[Steven Zahm]

@ Jennifer

re: can I add this code to the plugin once I get it working?

Perhaps. You would add it to the cmap.js file, deleting the cmap.min.js file.

[Author]

Posts