Incorporating Google Map API in Intel XDK

We recently toured a couple of European cities and thought of putting it in a demo project using Google Map API.
 
I also wanted to incorporate it in the Intel XDK so that I could display it in an app. First tried it on the localhost which is Internet Information Services to just check my coordinates of the cities.

Here is how it is incorporated in Intel XDK. Start a blank HTML Standard project without using the App Designer. What you get is a Hello Intel XDK! display in a mobile web app.  You need to make changes at indicated positions.

Here is the HTML page for the blank HTML5 Standard Project.

 Here is how it appears on the iPhone App before the changes.

Here is the 'Script' that you add to the blank page at the indicated position.

Here is the 'body' that you are adding.

Here is how it appears simulated on an iPhone 6 Plus.

The latitude and longitude of cities were taken from here:
http://www.mapsofworld.com/lat_long/czech-republic-lat-long.html

These are values used:
Prague:   50.0833 N | 14.3667 E
Munich:   48.1333 N | 11.5667 E
Salzburg: 47.0667 N | 13.0333 E
Budapest: 47.4833 N | 19.0833 E
Vienna:   48.2    N | 16.3667 E