I'm working on website that displays hotels on a map. A user lands on a page associated with a place and we display a map of all the hotels in that place (e.g. Key West).
I'm trying to improve the schema.org markup that we use. Currently the bulk of the page is marked up as a place. We then include the map in that markup. Then within all that we have individual hotels. So our markup looks something like -
<div id="mainwrap" itemscope itemtype="http://schema.org/Place">
<div id="map_canvas" style="height:100%;" itemprop="hasMap" itemscope itemtype="https://schema.org/Map"></div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
</div>
</div>
I think it would make more sense to mark everything up as a list of hotels using itemList. Then we can communicate how many hotels are in the list, how they're sorted, and even mark up some of the filter controls.
Is it possible to have overlapping schema? So for example, can I do something like this..
<div id="mainwrap" itemscope itemtype="http://schema.org/ItemList">
<div itemProp="PotentialAction" class="filterWidget">...</div>
<div itemProp="PotentialAction" class="sortWidget">...</div>
<div itemscope itemtype="http://schema.org/Place">
<div id="map_canvas" style="height:100%;" itemprop="hasMap" itemscope itemtype="https://schema.org/Map"></div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
</div>
</div>
</div>
Also is there a good way to test some of this? The problem is it's a single page application and the testing tools need raw html (whilst the google bot will run js and render the dom).