How to add infowindow for marker with stream location address (cordova android)?

M

maryoleksiuk2014-08-07 12:03:03

JavaScript

maryoleksiuk, 2014-08-07 12:03:03

I want to add an infowindow with a stream location address. I am using cordova. When I add in the usual way as in the Google documentation

var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  })

the marker is displayed, but does not respond to the click. Ideally it should be rendered with the settimeout function, but that doesn't work either.
Tell me what's the problem. Thanks

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="cordova.js"></script>
        
        <title>TestMap</title>
        <script type="text/javascript">
            function onLoad() {
                document.addEventListener("deviceready", onDeviceReady, false);
            }

            function onDeviceReady() {
                navigator.geolocation.getCurrentPosition(onSuccess, onError);
            }

            //GEOLOCATION
            var onSuccess = function(position) {
                var myLat = position.coords.latitude;
                var myLong = position.coords.longitude;
                var pos = new google.maps.LatLng(myLat, myLong);

                //MAP
                var mapOptions = {
                    center: pos,
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                
                var contentstr = '<h3>latitude</h3>';
                var infowindow = new google.maps.InfoWindow({
                    content: contentstr
                });
                
                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    title: 'i am here'
               });
          
            };

            // onError Callback receives a PositionError object
            //
            function onError(error) {
                alert('code: '    + error.code    + '\n' +
                        'message: ' + error.message + '\n');
            }

    </script>
    </head>
    
    <body onload="onLoad()">
        <h3>TestMap</h3>
        <div id="map_canvas" style="width:400px; height: 400px;"></div>
    </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

maryoleksiuk, 2014-08-07
@maryoleksiuk

Solved :) Added the following function to onSuccess. Maybe someone will be useful

var geocoder = new google.maps.Geocoder();
            geocoder.geocode({'location': pos},
                            function(results, status){
                                if(status == google.maps.GeocoderStatus.OK) {
                                    var popOpts = {
                                        content : results[1].formatted_address,
                                        position : pos
                                    };
                                    var popup = new google.maps.InfoWindow(popOpts);
                                    google.maps.event.addListener(marker, 'setTimeout', setTimeout (function() {
                                        popup.open(map, marker)}, 200));
                                    }
                                else {
                                alert('Geocoder failed due to: ' + status);
                            }
                            });