One of the main features of Google Maps are the different map types. In the example below we used a MapOption called MapTypeID to name of the map type displayed. These are defined in the Google API
documentation as follows:
ROADMAP (Default) - displays the normal, default 2D tiles of Google Maps.
SATELLITE - displays photographic tiles.
HYBRID - displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
TERRAIN - displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).
The value of the map type is case sensitive and coincides with the different map types you can choose from the standard maps UI.
<!-- Instantiating a map using the Satellite Map type --> $('#map_canvas').gmap({ 'center': mapOptions.center, 'mapTypeId': google.maps.MapTypeId.SATELLITE, 'zoom': mapOptions.zoom, 'disableDefaultUI': mapOptions.disableDefaultUI });
Another set of commonly used MapOptions are the controls. Google Maps allows you to customize the various controls within your maps. In our example on the previous page we set the disableDefaultUI option to false. This enables the zoom, map type, and street view controls by default. Other supported controls, which allow you more granularity, include the following:
Property Description
streetViewControl Boolean. The initial enabled/disabled state of the Street View control. This control is part of the default UI, and should be set to false when displaying a map type on which the Street View road overlay should not appear (e.g. a non-Earth map type).
panControl Boolean. The enabled/disabled state of the Pan control.
scaleControl Boolean. The initial enabled/disabled state of the Scale control.
mapTypeControl Boolean. Buttons that let the user toggle between map types (such as Map and Satellite). There are several levels of sub options for controlling the position and style if the map type controls that can be defined here.
overviewMapControl Boolean. A collapsible overview map in the corner of the screen
In this walkthrough you will manually geocode an address and center a map on that location using the JQM Plug-in and Google Maps Javascript API V3.
Steps
Open the Project
1. Open Intel XDK New
2. Click on the word PROJECTS in the top- left corner of the GUI.
3. Click the Open a Project button. 4. Select the following file:
/ftIntelXdkNew/walk/walk6_1/walk6_1.xdk
Manually Geocode a Location
5. Open a web browser to http://geocoder.us 6. Enter your address and click search.
7. Note the latitude and longitude of your address.
Load Google Maps and the Google JQM Maps Plugin
8. Open index.html in code view.
9. Where indicated by the comment, insert the script declarations to initialize the Google Maps Javacript API V3 library. Your code should resemble the following:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js? sensor=true”></script>
10. After the code that you inserted in the prior step, add a <script> tag that loads the jQuery Google Map plugin.
<script type="text/javascript" src="js/jquery.ui.map.js"></script>
Reserve a Space for the Map
11. Open contactdetail.html in Design mode.
12. From the Controls > Layout palette, drag a ROW widget and drop it onto the middle of the Design Canvas
directly underneath the row that you inserted in the prior step. 14. Go to Code view.
15. Locate the markup that was generated for the second row widget and add an id property with a value of “map” as illustrated below:
<div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row"
id="map">
16. Save the file.
Render the Map
17. Open index.html in code view. Note that a ContactDetail object has been defined for you.
18. Inside the ContactDetail object, define an init() method.
19. Inside the init() method, define a local variable named $mapContainer that points to the map row that you defined in step 15.
var $mapContainer = $("#map");
20. After the code that you inserted in the previous step, use the gmap() method to instantiate a map that's centered on the lat/lng position that you noted from step 7.
21. Review your code to ensure that it appears similar to the following:
var ContactDetail = { friendId: null, gMap: null,
init: function() {
var $mapContainer = $("#map"); this.gMap = $mapContainer.gmap({
center: new google.maps.LatLng ("38.908696", "-77.036527"), zoom: 16
}); } }
22. Save the file.
Invoke the ContactDetail Page
23. In the Contacts.displayList() method, modify the tap event listener for the friendsList list items to load the contactDetail.html page. Your code should appear as follows:
$('#friendsList li').bind('tap', function(e) {
ContactForm.friendId = this.getAttribute('data-value');
25. Return to index.html in CODE mode.
26. At the bottom of the ContactDetail.init() method, use jQuery to set the height of the map to be the height of the document body minus 300 pixels (to account for the header, footer, and top row).
$mapContainer.height ($("body").height() - 200);
27. Save the file and test in the Emulator. You should see a larger map, however that still doesn't quite render correctly.
28. Return to index.html in CODE mode.
29. At the bottom of the ContactDetail.init() method, insert a setTimeout() method that refreshes the map after 500 milliseconds.
setTimeout("$('#map').gmap('refresh')",500);
30. Save the file and test the application in the emulator.