Google Maps: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Line 58: Line 58:
== Example ==
== Example ==


This code lets the user enter a Video ID at runtime. It also resizes based on screen size.
This code changes the map to show the current location. It will only work on devices which get the current location.
<pre>
<pre>
Sub Main()
Function Button1_onclick()
   txtVideoID.text=YouTube1.settings.videoID
   navigator.geolocation.getCurrentPosition(gotLocation)
End Sub
End Function


Function btnRefresh_onclick()
Function gotLocation(location)
   YouTube1.settings.videoID = txtVideoID.text
   GoogleMap1.mapOptions.latitude = location.coords.latitude
   YouTube1.settings.width = Form1.Width-20
   GoogleMap1.mapOptions.longitude = location.coords.longitude
   YouTube1.refresh()
   GoogleMap1.refresh()
End Function
End Function
</pre>
</pre>

Revision as of 09:47, 10 April 2014

File:Googlemap.png

Description

The Google Maps control lets you embed Google Maps in your app. All the settings needed to display a map can be set at design time in AppStudio: no additional code needs to be written.

If you do want to change any settings at runtime, you can do so. Use the .refresh() method to redisplay the video with your new settings.

Properties

background Background color, before map is drawn.
disableDefaultUI Enables/disables all default UI. May be overridden individually.
disableDoubleClickZoom Enables/disables zoom and center on double click. Enabled by default.
draggable If false, prevents the map from being dragged. Dragging is enabled by default.
draggableCursor The name or url of the cursor to display when mousing over a draggable map. This property uses the css cursor attribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example: draggableCursor: 'url(http://www.example.com/icon.png), auto;'.
draggingCursor The name or url of the cursor to display when the map is being dragged. This property uses the css cursor attribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example: draggingCursor: 'url(http://www.example.com/icon.png), auto;'.
heading The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available.
keyboardShortcuts If false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default.
latitude" Location latitude: -90 to 90
longitude Location longitude: 0 to 180
mapMaker True if Map Maker tiles should be used instead of regular tiles.
maxZoom The maximum zoom level which will be displayed on the map. If omitted, or set to null, the maximum zoom from the current map type is used instead.
minZoom The minimum zoom level which will be displayed on the map. If omitted, or set to null, the minimum zoom from the current map type is used instead.
mapTypeId Type of map
noClear If true, do not clear the contents of the Map div.
scrollwheel If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default.
streetViewControl The initial enabled/disabled state of the Street View Pegman 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).
tilt Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45. The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 45 causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available for SATELLITE and HYBRID map types, within some locations, and at some zoom levels. Note: getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects.
zoom The initial Map zoom level. Required.
zoomControl The enabled/disabled state of the Zoom control.

Events

Events are handled by the control itself.

Example

This code changes the map to show the current location. It will only work on devices which get the current location.

Function Button1_onclick()
  navigator.geolocation.getCurrentPosition(gotLocation)
End Function

Function gotLocation(location)
  GoogleMap1.mapOptions.latitude = location.coords.latitude
  GoogleMap1.mapOptions.longitude = location.coords.longitude
  GoogleMap1.refresh()
End Function

Output

Related Items