Need help with Google Maps integration

[mats]

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.

Material Picker UI: Google Drive like interface

We’ve put together an awesome demo of Material for a complex desktop UI. The view emulates the Google Drive file management UI but can be used for any 3-panel view: http://daemonite.github.io/material/page-picker.html The basic premise is a category list on the left, records listing centre and a detailed property panel right. Selecting a record from the data list opens the detailed properties panel. In our example we have a Google Map and suburb information for Daemonite HQ. [image] You ca…

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

[sesemaya]

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