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

    Google Maps in Flex without Google Maps Flash API





      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?




        • 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) Community Member


            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






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



                                                              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);                                    



                                                              function codeAddress(mapArr) {

                                                                          geocoder = new google.maps.Geocoder();

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

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


                                                                 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';





            infoCepts technologies Pvt Ltd.

            Vot if Helpful