add google map to Contact Us page

Home Forums Jevelin Theme add google map to Contact Us page

Home Forums Jevelin Theme add google map to Contact Us page

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    RESOLVED Posts
  • cheeks
    Participant

    Hello. I am creating a Contact Us page and would like to add a Google Map. I could not find it it Widgets. Can you tell me how to add that, so that users can  interact with the map, like “get directions” and “save” the map. Thank you.

    cheeks
    Participant
    1. I’ve added the API but the map on my Contact Us page is incorrect. I added the same API to the Theme settings page, but to no avail. Can you go into my site to take a look? See screen shot. Log in Details below.
    2. Breadcrumbs. I see that breadcrumbs appear in the banner of each page. Can you help me set it such that breadcrumbs sit in a bar under the top navigation of each page? It doesn’t look right for bread crumbs to appear on the image.

    Thanks in advance for your help!

    Attachments:
    You must be logged in to view attached files.

    Solution for this topic

    Hi @cheeks,

     

    I hope you are well today and thank you for your questions.

     

    I’ve added the API but the map on my Contact Us page is incorrect. I added the same API to the Theme settings page, but to no avail. Can you go into my site to take a look? See screen shot. Log in Details below.

    I have configured the Map using the shared address on your site site which is displaying as shown in the attached screenshot.

     

    Could you please confirm?

     

    Breadcrumbs. I see that breadcrumbs appear in the banner of each page. Can you help me set it such that breadcrumbs sit in a bar under the top navigation of each page? It doesn’t look right for bread crumbs to appear on the image.

    To help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.

     

    If you want to you can also add reference of this thread in your newly created thread.

     

    We would be more than happy to help you on your new thread.

     

    Best regards,
    Shufflehound team

    Attachments:
    You must be logged in to view attached files.

    cheeks
    Participant

    Thank you for your help with the map. It works fine now!

     

    I will start the breadcrumbs question in a new thread.

    You are always welcome here 🙂

    cheeks
    Participant

    Hi there — I made changes to the Contact Us form. Now Recaptcha works for me, however the Google Maps that you correctly installed for me is now incorrect. I tried fixing it but to no avail. Can you tell me why this has happened? Hope you can help. Thank you.

    Just make sure to use correct Google maps API key and address.

    Also try deleting and using new Google map content element.

    cheeks
    Participant

    In Theme settings page it says the API method is outdated, instead ”
    <div class=”fw-backend-option-input fw-backend-option-input-type-text fw-clearfix fw-col-xs-12 fw-col-sm-9 fw-col-lg-10 width-type-fixed”>
    <div class=”fw-inner fw-pull-left fw-clearfix”>
    <div class=”fw-inner-option fw-clearfix”>
    <div class=”fw-backend-option-descriptor fw-listening-started” data-fw-option-id=”api_key” data-fw-option-type=”text”><input id=”fw-option-api_key” class=”fw-option fw-option-type-text” name=”fw_options[api_key]” type=”text” value=”” /></div>
    </div>
    </div>
    </div>
    <div class=”fw-backend-option-desc fw-col-xs-12 fw-col-sm-offset-3 fw-col-sm-9 fw-col-lg-offset-2 fw-col-lg-10″>
    <div class=”fw-inner”>Please set Google Maps API key under Google Maps element options</div>
    </div>
    <div>what does that mean please?</div>

    cheeks
    Participant

    I went to maps.google.com and typed my office address. please see private field for the URL, but when I pasted this in the Theme settings, I got an error message

    Attachments:
    You must be logged in to view attached files.

    In Theme settings page it says the API method is outdated, instead ”

    what does that mean please?

    It means you have to set API key in the Google Map content element as shown in the attached screenshot.

     

    I can see on your site you have set API key but it is generating below invalid key error so please resolve it.

     

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

     

    I went to maps.google.com and typed my office address. please see private field for the URL, but when I pasted this in the Theme settings, I got an error message

    You are setting the address wrong. Please see the second attached screenshot that you have not set Location at all.

    Attachments:
    You must be logged in to view attached files.

    cheeks
    Participant

    I added the API key in 2 places:

     

    a) Contact us page – Google Maps

    b) Appearance -Theme Settings – General – Google Maps API key.

     

    Please see screen shot.

     

    However the correct map fails to show up. Can you please see what’s wrong? Hope you can fix. Thanks.

    Please check now.

     

    I have just resaved your address in the Google map content element.

    cheeks
    Participant

    It’s good. Can you tell me what I did wrong? So I know how to do this on my own in future? The API key is correct. so did I place it in the wrong fields or something?

    You have to not just copy paste whole address but set it one by one such as first country then state then city etc.

Viewing 14 posts - 1 through 14 (of 14 total)