Google map

[adiraoco]

I have updated the google map template. I have use the Google Static Maps API.

Please test and see if it's fine. It still needs some finishing touches. Here is a preview.

@teaganm I have added some styling to the template. Please move it to the main stylesheet.

I will also have to work on a responsive view.

[ryanlabelle]

Thank @adiraomj

Map is not showing for me, maybe it's my Google API key, I'll try a new one.

https://cl.ly/0e2D3C252I0Z

No map, no info box.

@teaganm , how about you?

[ryanlabelle]

Okay, now with a new key, I get the info box but the map is broken.

https://cl.ly/3p2e252r2Z0f

[adiraoco]

@ryanlabelle are you using the Static Maps API? https://developers.google.com/maps/documentation/static-maps/

@teaganm can you please check if it is working for you. Thanks

[ryanlabelle]

Thanks @adiraomj - I wasn't but now I am. We'll need to adda note or update the link to go directly to https://developers.google.com/maps/documentation/static-maps/

Can we have a backup API key just in case they don't enter it correctly? How about one that runs through our themovation google account?

AIzaSyB8l2MZuaD3n75dnMm0_OOx2QEv_lnWpmw

[adiraoco]

Made a small change.. I am using the google map as a background image now. That seems to work great for smaller devices.. Please test

@teaganm please move this section to the main CSS files. The text area needs some styling for smaller screens. :)

[ryanlabelle]

Looks good @adiraomj - Teagan has some minor styling to do but I think we are good.

[adiraoco]

Great :)

[teaganm]

Hey @adiraomj thanks! I just reviewed the widget and have feedback below. This widget is low priority so please address this after everything else.

1. In this widget we were really hoping it could be interactive rather than static. Is there any possible option to have it interactive?

2. I find that the text for cities/places/etc is very large on the Maps widget compared to the default sizing. I imagine if we change to interactive it won't be a problem, but if we stay with static is there an option to change that?

• Custom maps widget - https://cl.ly/1443010L3i2B
• Elementor widget / default sizing - https://cl.ly/3i1f2i1a3I14

I can see that it's using an image bg that is 1280x1280 (link) but even when the image is viewed at actual size, the text is very large.

3. We also want to change the alignment so that it's aligned left, but within a container - however for that I think we just need to add some extra markup and then adjust the CSS.

[ryanlabelle]

Looks like there is one more issue with the Google Maps Widget. There is some inline styling using and submission requires us to use wp_add_inline_style,

https://codex.wordpress.org/Function_Reference/wp_add_inline_style

Can you see about that @adiraomj ? Cheers!

[ryanlabelle]

@adiraomj @teaganm - Update. I've added some new styles that help with the lower resolution map. Google limits the size to 1280 https://developers.google.com/maps/documentation/static-maps/intro#Imagesizes but seems you can sign up for premium to get larger sizes. I've signed up but I'm still seeing the basic sizes. Maybe this is all we are going to get at this point. I think the new styles help out.

The image is a background static map so there is no interaction. They can always use the Elementor google map widget. If we do interactive, we'll have to use the embedded map option and then somehow overlay the text box. Maybe @adiraomj has some ideas how this can be done?

If you have adjustments to make for the alignment just let me know. Are you thinking the usual align the entire container?

[ryanlabelle]

A little more about the alignment... looks like the align option won't work because of the absolute positioning?

https://cl.ly/2o013H2b451W

[ryanlabelle]

Hey @adiraomj it looks like we can't get the higher resolution without paying for it, so It think we will need to use the embed approach and look at ways to edit the info box in the embed map or injecting our own.

https://cl.ly/08172o0Z1532

Is this something you can do?

[adiraoco]

I have started working on moving to the javascript api. Its in a branch called google-map.. I'll complete it tonight. The map widget will be much better this way.

[ryanlabelle]

Thanks!

[adiraoco]

I have made changes in this branch https://github.com/ryanlabelle/th-widget-pack/tree/google-map

I have removed the map address field and replaced it with Latitude and Longitude fields. The JavaScript API only accepts these values. ( Hope this is fine ). I also checked out the Jupiter theme, they use the same fields and suggests the use of www.latlong.net to get these values.

We will have to update our fallback api key. We are currently using a Static Map API and need to use the JavaScript API.

The class .map-info will need z-index: 1. This will place the info box above the map.

Lastly, please test out the prevent scroll feature.

@ryanlabelle Please let me know if everything is working fine. I'll then update the map style field that you added a few days back. The format for the JavaScript API is slightly different. https://developers.google.com/maps/documentation/javascript/styling

[adiraoco]

@ryanlabelle I fixed the horizontal position setting. Please test. Thanks.

[ryanlabelle]

Looks great. I have a few minor edits to make then you can merge. Thanks!!

[ryanlabelle]

@teaganm we need a z-index for the map .map-info { z-index: 2; }

[ryanlabelle]

Look good @adiraomj , @teaganm will add styling so we can merge this.

[teaganm]

CSS has been added

[ryanlabelle]

Hi @adiraomj , can we take a look at one issue we are noticing with Google Maps? We can't use two maps on the same page at the same time. I get an error: "You have included the Google Maps API multiple times on this page. This may cause unexpected errors.”.

Try adding two of our Maps to a single page, you'll see the error. Cheers!

[adiraoco]

Hi. Working on it.. Will push update soon..

[adiraoco]

Working on frontend now.. Still an issue with Elementor.. Working on it..

[ryanlabelle]

Please update and test the Google Map Widget on Elementor 1.6 RC2 - Be sure to do an update (get latest) for the widget plugin, I just pushed a bunch of changes to support Elmentor 1.6 :) Google Map error still there.

https://cl.ly/2j2O3U3O0c2k

[ryanlabelle]

@adiraomj actually it just looks like the backend google map isn't showing. It's working on the frontend. When I add a second to the backend, the first one works again.

Error: Uncaught ReferenceError: google is not defined

[ryanlabelle]

@adiraomj I'm still seeing a JS error using our Google Map Widget on the live editor and also on the front end.

Here is the error in the live editor: https://cl.ly/2H302P1t2D35

and Frontend : https://cl.ly/3k2b05250y0c

Could you take a look? We are live with the theme, this is the only error left to resolve. :)

[megsens]

Hi there.

I'm very very new to HTML & CSS in general and I was wondering if you could help me. I can't seem to get my Google Map div to move. It's fixed at the bottom left.

I will provide the relevant pieces of code (HTML and CSS) as well as a screen shot of my maps page.

This is for a school project so any help or advise you could give would be really appreciated.

Thank you! :)

SCREENSHOT -

MY CODE -

HTML:

`

                <iframe

                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2378.4001209416424!2d-2.595154683888353!3d53.40766997999203!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487b03cb736bd27d%3A0x74d6a6de0a6bd89c!2sWarrington+%26+Vale+Royal+College!5e0!3m2!1sen!2suk!4v1511795257435"

                    width="600"

                    height="450"

                    frameborder="0"

                    style="border:0"

                allowfullscreen></iframe>   `

CSS:

`.container.parent {

font-family: times new roman;
color: black;
font-size: 12px;
width: 100%;
height: 100%;
float: none;
position: relative;

}

.google-map {

position: relative;
margin-left: 100px;
margin-right: auto;
width: 50%;
height: 50%;
`

[ryanlabelle]

Hello, are you using one of our themes?

[megsens]

Thanks for replying. I don't understand what you mean exactly ?

[ryanlabelle]

Hi Meg, this plugin is designed to work with our WordPress themes, you can find theme here: https://themeforest.net/user/themovation/portfolio