Need help with Google Maps integration

HI! First of all sorry for my poor english, it’s not my native language. I’ll try to be as clear as I can.

I’m making a project and I need to integrate Google Maps on it. I was seeing the “page-picker” example of the Material Design project to see how you implemented the maps, but I can’t fully understand all.

I see that you use <span class="ui-picker-map-lat"> for latitude and another span for longitude, and then you call(?) the map with <div class="ui-picker-map-wrap" id="ui_picker_map_wrap"> later in the page code.

I dont understand how you do that, because what I need is more simple.

I need the map in a card at the begginning of my page, full width, with the option to move the marker for better location. If there’s a easy way with the code to implement that would be great! (like those span things)

Anyways, I hope my problem is well explained.

Thanks for the awesome work! I love it :slight_smile:

1 Like

hi @mats

the page-picker example is more of a demo for a complex desktop UI that emulates Google Drive web interface, rather than how to integrate Google Maps API. You certainly do not need all the <div>s and <span>s to get Google Maps working on your page.

In your case, you probably only need a card on the top of the page, give it a class or an id, and then active and customise Google Maps with some javascript maybe similar to this: https://developers.google.com/maps/documentation/javascript/examples/marker-simple

2 Likes