As a conformation of my abilities to integrate websites with existing APIs, MidiMAPS was transformed via GoolgeMaps and GooglePlaces API's into a fully interactive virtualization of the world we live in. Search citys in select countrys to explore hotels around the world. MidiMaps responds to users interactions allowing them to actively engage with data set served through the API. When ever a user clicks on the map MidiMaps will display that location in a street view allowing virtual explorations.

A live demo can be found here. A GitRepo can be found here.

As an hotel seeker I expect midimaps to showcase hotels around the world.

As a virtual explorer I expect to be able to explore that environment without being present.

My goal in the design was to make it as easy as possible to access all information on the site while striving to keep all map views as big as possible.

With COVID-19 we have to find use of all this new time MidiMaps is a great way to travel this world when you cannot be physically present

The search section allows users to select a country, that will bound user input to that country, auto complete provides the correct city in selected country.

About wireframe

Default color schemes utilized to ensue user familiarity.

1. HTML
2. CSS
3. JavaScript
4. Bootstrap

This site utilizes Bootstrap to create a 4 quadrant grid layout. Google maps API was utilized to remove default map functionality, in order to expand user map space and remove the option for eternal link use, to ensure user stays within this application. Zoom level 18 was used to produce the 3d building renderings for top left Map.

In the future, I would like to implement Virtual Reality API, allowing the site to display in VR.

The hotel seeker and virtual explore user stories Achieve the intended goals by providing hotel search functionality within the site. If you’re using mini maps as a virtual explorer your all set to click away.

To minimize the chance of users inputting the wrong data the country select button is bound to the input search only propagating city’s in selected country.

This site was tested across multiple browsers (Chrome, Safari, Internet Explorer, FireFox) and on multiple mobile devices (iPhone 4, 5, 7: Chrome and Safari, iPad, Samsung Galaxy) to ensure compatibility and responsiveness via responsinator

This site is hosted using GitHub pages, The deployed site updates automatically with new commits to the master branch.

To run locally, you can clone this repository https://github.com/MACmidiDEV/CInst-M2-Interactive-Development.git

The folder Docs in assets contains three files from googles api sample code that were combined to create MidiMaps.

Thanks to Googles APIs here.

Google Places API here.

This is for educational use.