2 Replies Latest reply: Aug 28, 2013 1:35 AM by Atul(Flex Dev) RSS

    Google Maps in Flex without Google Maps Flash API

    crankoide

      Hello,

       

       

      Does anyone know an alternative to embed Google Maps in a Flex application without Google Maps Flash API (because it is deprecated)?

      To forgo Google Maps and use another map provider or to develop the application again with JavaScript/HTML are no options. Flex-IFrame or similar solutions (HTML iframe overlay) or a conversion to Adobe Air is not wanted.

       

       

      Is there a solution available either commercial or open source to use the JavaScript SDK from Google in Flex (e.g. via ExternalInterface or Flex Ajax Bridge)? Or is there an alternative Flash SDK for Google Maps available?

       

       

      Thanks!

        • 1. Re: Google Maps in Flex without Google Maps Flash API
          Flex harUI Adobe Employee

          Search the Apache Flex mailing list archives.  This discussion happened there a while a go.

          • 2. Re: Google Maps in Flex without Google Maps Flash API
            Atul(Flex Dev)

            Hi,

            Follow below stpes to integrate google map with flex application using javascript with wrapper.

             

            Step1: Add HTML div tag in wrapper

             

             

            Step2: Add below scripts into your wrapper (index.template.html)

             

            <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDBe1ZFLWTfmXJ_tkBip77koksIjY23gUU&sensor= false"></script>

            <div id="flashContent">

             

             

            Step3: Call methods from your flex application

             

             

            ExternalInterface.call("","mapArr")

             

             

            Step4:Add following method inot javascript file to load map with data

             

            Example:Codebase

                                                              Consumes lat/long information

                                                              function loadMap("{collect data}") {

                                                              //get the lat/long information for the address

                                                                                      var mapOptions = {

                                                                                  disableDefaultUI: true,

                                                                                  zoom: 18,

                                                                                   mapTypeId: google.maps.MapTypeId.ROADMAP

                                                                                };

                                                                                locMap = new google.maps.Map(document.getElementById("{Id of 'div' added in wrapper ie index.template.html}"), mapOptions);                                    

                                                                               codeAddress(mapArr);                

                                                                }

                                                              function codeAddress(mapArr) {

                                                                          geocoder = new google.maps.Geocoder();

                                                              geocoder.geocode( { 'address': mapArr[0].address}, function(results, status) {

                                                              if (status == google.maps.GeocoderStatus.OK) {

                                                                locMap.setCenter(results[0].geometry.location);

                                                                 addMarker(results[0].geometry.location, locMap, mapArr);

                                                              }

                                                               else {

                                                                                   alert('Geocode was not successful for the following reason: ' + status);

                                                                        }

                                                            });

                                                            document.getElementById("Id of 'div' added in wrapper ie index.template.html").style.display = 'block';

                                                        }

             

            Thanks,

            Atul(9096448895)

            infoCepts technologies Pvt Ltd.

            Vot if Helpful