Home › Forums › Jevelin Theme › add google map to Contact Us page
Home › Forums › Jevelin Theme › add google map to Contact Us page
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.
Thanks in advance for your help!
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
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 🙂
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.
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>
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.
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.
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.