CODEWITHSUNDEEP
javascriptandroidhtmlcordovaphonegap
Jokamutta
Jokamutta

Reputation: 1

I need advice with making a Google map based app

so I'm trying to make a Google maps app for Android with Phonegap where I could add markers that have like a message. And the message is just stored locally for now. So I included a picture how the app looks now. Here is the App

So osoite means address, Viesti means message and lisää merkintä means add a note.

So here is the HTMl code for the index:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <link rel="stylesheet"
        href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

        <script src="https://code.jquery.com/jquery-2.1.4.js"
        integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4="
        crossorigin="anonymous"></script>

        <script
        src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <title>Kartta</title>
    </head>
    <body>

    <div id="pageOne" data-role="page">
    <div data-role="header">
        <h1>Kartta</h1>
    </div>
    <div role="main" class="ui-content ui-body-a">
        <div id="geolocation" style="width: 285px; height: 370px;">
        </div>

        <div role="main" class="ui-content ui-body-a">
            <p id="pageOne">
            </p>

        </div> <!-- /content -->

    </div>
    <div data-role="footer">
        <label for="textinput-hide" class="ui-hidden-accessible">Osoite</label>
        <input type="text" class="Osoite" name="textinput-hide" id="textinput-hide" placeholder="Osoite"
        <br>
        <label for="textinput-hide" class="ui-hidden-accessible">Viesti</label>
        <input type="text" class="Viesti" name="textinput-hide" id="textinput-hide" placeholder="Viesti">
        <br>
        <button class="ui-btn">Lisää merkintä</button>
    </div> <!-- /footer -->
    </div>

            <script type="text/javascript" src="phonegap.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script src="http://maps.googleapis.com/maps/api/js?key=(My own key)">
            </script>
            <script type="text/javascript" src="cordova.js"></script>

            <script type="text/javascript">
            $(document).on("pageOne", "#marker", function () {

            $.ajax({
                    url: "https://maps.googleapis.com/maps/api/geocode/json?address=1600+Ratapihantie,+Pasila,+FI&key=(My own key)",
                    datatype: "json",
                    timeout: 5000
            })
            .done(function(data) {
                var marker= results[0].geometry.location.lat
                var marker2= results[0].geometry.location.lng

            })
                  });

                app.initialize();
            </script>
    </body>
</html>

And here is the code for the Javascript:

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online',

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    // The scope of 'this' is event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        app.receivedEvent('deviceready');       
        // Get our current location
        navigator.geolocation.getCurrentPosition(app.onSuccess, app.onerror);
    },

    // Current location was found
    // Show the map
    onSuccess: function(position) { 
        var longitude = position.coords.longitude;
        var latitude = position.coords.latitude;
        var latLong = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            center: latLong,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map=new google.maps.Map(document.getElementById("geolocation"), mapOptions);
    },

    // Current location could not be determined
    // Show error
    onerror: function(error) {
        alert('code: '   +error.code   + '/n' + 'message: ' + error.message + '\n');
    },

    //  Update DOM on a Received Event
    receivedEvent: function(id) {

    }


};

I just need help with adding the marker with the message.

Upvotes: 1

Views: 56

Answers (1)

Muthu Raj
Muthu Raj

Reputation: 35

You can use Google Map API for adding markers in map.

For simple marker, use this code:

var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });

For more details, Check out: https://developers.google.com/maps/documentation/javascript/examples/marker-simple

Upvotes: 3

Related Questions