CODEWITHSUNDEEP
javascriptandroidgoogle-mapsandroid-maps
devloper
devloper

Reputation: 244

how to use google maps in android app

I am a new android app developer and i want to use google map in my application.When user clicks on marker it should display address for particular locations.I am usig longitude and latitude.This is my code- `

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 100% }
        </style>

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



    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      function initialize() {
// sample longitude and latitude
        var locations = [
          ['Deolali',    20.022703,73.72811],
          ['Nasik Road',  20.02929,73.722362],
        ];
        var map_center = new google.maps.LatLng(20.022703,73.72811);
        var str='<h2>Deolali,Nasik Road,Nasik</h2>'
        var myOptions = {
          zoom: 10,
          center: map_center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

         for (i = 0; i < locations.length; i++) {
        var store1 = new google.maps.LatLng(locations[i][1], locations[i][2]);

    var infowindow = new google.maps.InfoWindow({
        content: str
    });



            var marker1 = new google.maps.Marker({
            position: store1, 
            map: map, 
            title:"Store 1"
        });

        google.maps.event.addListener(marker1, 'click', function() {
          map.set_center(store1);
          map.set_zoom(16);
          marker1.openInfoWindowHtml('here I am');
          infowindow.open(map,marker);

        });
    }


      }
    </script>

      </head>
      <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
      </body>
    </html>

` Please help me out.

Upvotes: 2

Views: 1671

Answers (1)

devloper
devloper

Reputation: 244

I used static map for may application and it really works nicely.This method uses HTML codes.You have to visit site http://maps.google.com/ and search for your city/state/country for which you want to use google map.After getting map search for your locations you want and save them as 'save to map'. Once you have done then click on Link button in left side bar and you will get html code like this,///this is example code for google map of USA,

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&amp;msid=216854043611115490081.0004bc7afbd6561efbeb0&amp;ie=UTF8&amp;ll=43.075968,-107.290284&amp;spn=0,0&amp;t=h&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?msa=0&amp;msid=216854043611115490081.0004bc7afbd6561efbeb0&amp;ie=UTF8&amp;ll=43.075968,-107.290284&amp;spn=0,0&amp;t=h&amp;source=embed" style="color:#0000FF;text-align:left">My Saved Places</a> in a larger map</small>

You have to just paste code like this in you html file and you will get static map image with your saved locations.One more thing you can add number of locations as much as you want.

Upvotes: 1

Related Questions