CODEWITHSUNDEEP
javascriptandroidgoogle-mapscordovamarkers
user3193801
user3193801

Reputation: 93

javascript googlemaps with multiple markers not showing markers in android using cordova app

I,m testing with a simple code for a map with multiple markers and in browser are always shown but when in use inside cordova app for android platform is not working. Here is de example. In this example you have to replace with your api key of google apis the text "yourapikey" in the google url

    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Google Maps Multiple Markers</title>
    <script src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" type="text/javascript"></script>

</head>
<body>
    <div class="app">
        <div id="map" style="height: 400px; width: 500px;">
        </div>

        <script type="text/javascript">
            var locations = [
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Cronulla Beach', -34.028249, 151.157507, 3],
                ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                ['Maroubra Beach', -33.950198, 151.259302, 1]
            ];

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(-33.92, 151.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        </script>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

Upvotes: 0

Views: 364

Answers (1)

user3193801
user3193801

Reputation: 93

Finally i became that the error is from webview browser of cordova that do not render the markers , maybe because it do not support very well canvas as do other browsers like chrome of firefox. So the solution is make and overlay here is my code example that now works on Cordova android platform.

this is the html

 <head>

        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">-->
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Google Maps Multiple Markers</title>

    </head>
    <body>
        <div class="app">
            <button onclick="dale()">click</button>
            <button onclick="dale2()">click2</button>
            <div id="map" style="height: 400px; width: 500px;">
            </div>

            <script type="text/javascript">

            </script>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="https://maps.google.com/maps/api/js?key=AIzaSyBosuhuoHgQDdhUBYc_YgspOHPDFkvhuD8&libraries=drawing,place,geometry,visualization&callback=initMap" type="text/javascript"></script>

    </body>

this is the init.js

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map;
var CustomMarker;
function initMap() {
    initCustomMarker();
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

function addMarkers() {
    var infowindow = new google.maps.InfoWindow();

    var overlay, i;

    for (i = 0; i < locations.length; i++) {
        overlay = new CustomMarker(
            new google.maps.LatLng(locations[i][1],locations[i][2]),
            map,
            {
                marker_id: '123',
                color: 'Red',
                titulo : locations[i][0],
                infowindow : infowindow
            }
        );


    }
}

function dale(){
    debugger;
    console.log(map);
    console.log(google.maps);
    addMarkers();
}

function dale2(){
    console.log(map);
    console.log(google.maps);
    var overlay = new CustomMarker(
        new google.maps.LatLng(-33.890542, 151.274856),
        map,
        {
            marker_id: '123',
            color: 'Red',
            titulo : 'Podcast',
            infowindow:  new google.maps.InfoWindow()
        }
    );

}


var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

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

        console.log('Received Event: ' + id);
        initMap();
    }
};


function initCustomMarker(){
    CustomMarker = function (latlng, map, args) {
        this.latlng = latlng;
        this.args = args;
        this.setMap(map);
    }

    CustomMarker.prototype = new google.maps.OverlayView();

    CustomMarker.prototype.draw = function() {

        var self = this;

        var div = this.div;

        if (!div) {

            div = this.div = document.createElement('div');

            div.className = 'marker';

            div.style.position = 'absolute';
            div.style.cursor = 'pointer';
            div.style.width = '20px';
            div.style.height = '20px';
            if(this.args.color != null)
                div.style.background = this.args.color;
            else
            div.style.background = 'blue';

            if (typeof(self.args.marker_id) !== 'undefined') {
                div.dataset.marker_id = self.args.marker_id;
            }
            var infowindow = this.args.infowindow;
            var content = this.makeContent();
            var map = this.map;
            var latlng = this.latlng;
            google.maps.event.addDomListener(div, "click", function(event) {
                google.maps.event.trigger(self, "click");
                infowindow.setPosition(latlng);
                infowindow.setContent(content);
                infowindow.open(map);
            });

            var panes = this.getPanes();
            panes.overlayImage.appendChild(div);
        }

        var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

        if (point) {
            div.style.left = point.x + 'px';
            div.style.top = point.y + 'px';
        }
    };

    CustomMarker.prototype.remove = function() {
        if (this.div) {
            this.div.parentNode.removeChild(this.div);
            this.div = null;
        }
    };

    CustomMarker.prototype.getPosition = function() {
        return this.latlng;
    };
    CustomMarker.prototype.makeContent = function() {
        var res = "<div>";
        if(this.args.titulo != null)
        res += "<h6>"+this.args.titulo+"</h6>";
        res += "<p> "+this.latlng.lat()+", "+this.latlng.lng()+"</p>";
        res += "</div>";
        return res;
    };


}



app.initialize();

Upvotes: 2

Related Questions