MoSync Map and GPS

380 views

Skip to first unread message

Joao Barbosa

unread,

Apr 30, 2013, 9:07:24 AM4/30/13

to mosyn...@googlegroups.com

Hi,

can we incorporate some map service or gps service in a HTML5 MoSync project?

Thank you

Michael Oki

unread,

Apr 30, 2013, 9:48:56 AM4/30/13

to mosyn...@googlegroups.com

Yes. Check developers.google.com and navigate to Google Maps. You'll see several samples of how to use the map service. Javascript is the main language you'll find there.

FYI "navigator.getCurrentLocation" is one of the KEY functions you'll find helpful.

--
You received this message because you are subscribed to the Google Groups "mosync-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mosync-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Alex Jonsson

unread,

Apr 30, 2013, 3:17:52 PM4/30/13

to mosyn...@googlegroups.com, Ali Sarrafi

In MoSync there are several map API:s for c/c++ developers, and those who make hybrid solutions. If you're doing a web-only application, then Google Maps API is a solid choice, here are some more links:

Google Map API (version 3): https://developers.google.com/maps/documentation/javascript/tutorial
Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/3.10/reference?hl=en#Map
Making the mobile web appier
http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/
https://gist.github.com/tfausak/2222823 (example)

GeoLocation tutorials

http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/
http://www.w3schools.com/html/html5_geolocation.asp

If you instead want to call a native map, straight from your HTML5 application, I'd do something like this:

http://www.mosync.com/blog/2013/01/how-extend-javascript-custom-c-code-opening-google-maps-hybrid-app

best regards

Alex

p.s. below an example of a index.html for your Reload Map project:

( you need to supply your own icons, e.g apple-touch-icon-57x57.png and the marker small-smiley.png)

!DOCTYPE html>
<html> 
  <head>
    <title>Mapapp</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />

    <!-- iPhone -->
    <link href="apple-touch-icon-57x57.png"
          sizes="57x57"
          rel="apple-touch-icon">

    <!-- iPhone (Retina) -->
    <link href="apple-touch-icon-114x114.png"
          sizes="114x114"
          rel="apple-touch-icon">

    <!-- iPhone -->
    <link rel="apple-touch-startup-image"
          media="(device-width: 320px)"
          href="apple-touch-startup-image-320x460.png">

    <!-- iPhone (Retina) -->
    <link rel="apple-touch-startup-image"
          media="(device-width: 320px)
             and (-webkit-device-pixel-ratio: 2)"
          href="apple-touch-startup-image-640x920.png">


    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #wrapper { position: relative; }
      #over-map { position: absolute; bottom: 20px; left: 10px; z-index: 99; }
      button.direction { width: 36px;}
    </style>
    </style> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOX2o6P-9TfU5FW9zfREWua2llgNm5wlU&sensor=true&language=sv">
    </script>
    <script type="text/javascript">
        function initialize() {
            var useragent = navigator.userAgent;
            var mapdiv = document.getElementById("map-canvas");
            window.scrollTo(1, 0);
            var isMobile = useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1;
            if (isMobile) {
                if(!localStorage.hasShowedHomeScreenInfo && !window.navigator.standalone) {
                    alert("Did you know that you can add this app to your home screen?");
                    localStorage.hasShowedHomeScreenInfo = true;
                }
                mapdiv.style.width = '100%';
                mapdiv.style.height = '100%';
            } else {
                mapdiv.style.width = '600px';
                mapdiv.style.height = '800px';
            }

            var kthCoords = new google.maps.LatLng(59.34698, 18.0731)
            var mapOptions = {
                center: kthCoords,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.HYBRID,
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            
            var marker = new google.maps.Marker({
                position: kthCoords,
                title:"Coola skolan",
                map: map,
                icon: 'small-smiley.png'
            });

            marker.setAnimation(google.maps.Animation.BOUNCE);

            var movableMarker = new google.maps.Marker({
                position: new google.maps.LatLng(59.34698, 18.0761),
                title:"Flytta mig!",
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });

            $("#zoom-in-button").click(function () {
                map.setZoom(map.getZoom() + 1);
            });

            $("#zoom-out-button").click(function () {
                map.setZoom(map.getZoom() - 1);
            });

            var panDistance = 100;
            $("#left-button").click(function () { map.panBy(-panDistance, 0); });
            $("#right-button").click(function () { map.panBy(panDistance, 0); });
            $("#up-button").click(function () { map.panBy(0, -panDistance); });
            $("#down-button").click(function () { map.panBy(0, panDistance); });
            $("#show-me-button").click(function () {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;
                    var geolocpoint = new google.maps.LatLng(latitude, longitude);
                    map.panTo(geolocpoint);
                });
            });

            $("#cool-place-button").click(function () {
                map.panTo(new google.maps.LatLng(59.314500, 18.068315));
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
<div id="map-canvas">

</div>

<div id="over-map">
<button type="button" id="zoom-in-button">+</button>
<button type="button" id="zoom-out-button">-</button>
<br/>
<button type="button" class="direction" id="left-button">◀</button> 
<button type="button" class="direction" id="right-button">▶</button>
<br/>
<button type="button" class="direction" id="up-button">▲</button> 
<button type="button" class="direction" id="down-button">▼</button>
<button type="button" id="show-me-button">Show me</button>
<button type="button" id="cool-place-button">Cool place</button>
</div>
</body>
</html>

--
<><><><><>< O ><><><><><>
Docent, Tech Dr Alex Jonsson
Founder & Chief Technical Officer
MoSync AB
Saltmatargatan 8
S-113 59 STOCKHOLM
SWEDEN
+46 8 207745 (office)
+46 704 331312 (cell)

MoSync in Singapore (Mobile Sorcery)
291A South Bridge Road, Singapore 058836
tel. +65 6327 13 30 | mobile. +65 9746 90 82 (Singapore) | +46 8503 211 01 (Sweden) | fax. +65 6327 20 51

Reply all

Reply to author

Forward

0 new messages