- Create a project. For that, choose on the main menu.
- In the Create New Project dialog box that opens specify the name of the project in the Name text box, for example, type MyFirstWebProject.
-
In the Location text box, specify the folder to create the new project folder in.
Type the path manually or click the Browse button
next to the text box. Then select the desired folder in the dialog that opens.
PhpStorm composes the path to the project folder as follows:
-
Create an HTML file. To do that, right-click the project directory in the Project tool window,
point to New on the context menu, and choose HTML File.
- In the New HTML dialog box that opens type MyFile and click OK. PhpStorm will create the stub file for you and open it in the dedicated editor tab.
-
Type this sample code inside the <html /> tag:
<html> <head> <script src="http://maps.google.com/maps?file=api"></script> <title> Your first Web project </title> </head> <body> <div id="map" style="width: 400px; height: 300px"></div> <label for="latitude">Latitude:</label> <input type="text" id="latitude" value="59.980473"/><br/> <label for="longitude">Longitude:</label> <input type="text" id="longitude" value="30.324068"/><br/> <input type="submit" value="Show map" onclick="showMap(document.getElementById('latitude').value, document.getElementById('longitude').value);"/> <script type="text/javascript"> function showMap (latitude, longitude) { var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(longitude, latitude), 1); } </script> </body> </html>
Tip
It is recommended that you type this code manually to experience coding assistance provided by PhpStorm.
- Save the file by choosing or pressing Ctrl+SCtrl+S.
- Run your application. Do one of the following:
- Choose , then select the desired browser from the list.
-
Click the desired browser on the browser toolbar:
-
In the page that opens in the browser, click the Show Map button. The Google map, that is displayed,
shows the location of the IntelliJLabs office in Saint-Petersburg.
Click image to close this popup
Click thumbnail to view larger image.
