5 Replies Latest reply: Sep 3, 2012 1:33 PM by Ralph3616 RSS

    Google Maps how to add a polyline to this?

    Ralph3616 Community Member

      I have added a Google map to my website. There seems to be dozens of sample to use and after a number of tries settled on one that fits my needs perfectly.. except I want to add some polylines to it. Colin, the guy who made this sample seems to have used some clever and unique coding... that makes for a clean and useful sample... BUT.. I can not figure out how to add a polyline.

       

      I hope someone here can understand the process and hopefully show me how to add a polyline. Thank you for your time.

       

       

      <!--From http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/-->
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title>Google Maps Example</title>
          <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map_canvas { height: 100% }      
          </style>
           <script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
      </head>
      <body>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript">
      var infowindow = null;
          $(document).ready(function () { initialize();  });
      
          function initialize() {
      
              var centerMap = new google.maps.LatLng(39.828175, -98.5795);
      
              var myOptions = {
                  zoom: 6,
                  center: centerMap,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              }
      
              var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      
              setMarkers(map, sites);
              infowindow = new google.maps.InfoWindow({
                      content: "loading..."
                  });
              
              var bikeLayer = new google.maps.BicyclingLayer();
              bikeLayer.setMap(map);
          }
      
          var sites = [
          ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
          ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
          ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
          ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
      ];
      
      
      
          function setMarkers(map, markers) {
      
              for (var i = 0; i < markers.length; i++) {
                  var sites = markers[i];
                  var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                  var marker = new google.maps.Marker({
                      position: siteLatLng,
                      map: map,
                      title: sites[0],
                      zIndex: sites[3],
                      html: sites[4]
                  });
      
                  var contentString = "Some content";
      
                  google.maps.event.addListener(marker, "click", function () {
                      // alert(this.html);
                      infowindow.setContent(this.html);
                      infowindow.open(map, this);
                  });
              }
          }
      </script>
      
      <div id="map_canvas" style="width:100%; height:100%"></div>
      </body>
      </html>
      
        • 1. Re: Google Maps how to add a polyline to this?
          Ralph3616 Community Member

          I appreciate that my question is not at all related to Adobe (other than I used DWCS4 ) but..  would this question be better asked in some other part of the Adobe forum?  Is a solution even possible.. I do not understand the rational (in the code ) used but if someone who knows... Is adding a polyline totally incompatible?

           

          I apprecate the 36 views to date.. thank you for your time

           

          For what it is worth here is the URL for this page

           

          http://www.lsvs.ca/test/

          • 2. Re: Google Maps how to add a polyline to this?
            Gaurav.S Employee Hosts

            The Polyline class defines a linear overlay of connected line segments on the map.

            A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence.

             

            I am not sure what you are looking for. But got some information about Google Map Polyline. Please check the link below.

            https://developers.google.com/maps/documentation/javascript/overlays#Polylines

             

            http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/

             

             

            that might be helpful for you.

            • 3. Re: Google Maps how to add a polyline to this?
              Ralph3616 Community Member

              Thanks Gaurav

              I have looked... and have made maps with polylines. I just can not merge it into the code that is used for my map. I get either a blank page, or no change.

              • 4. Re: Google Maps how to add a polyline to this?
                Gaurav.S Employee Hosts

                Ok Ralph. Check the code below, and tell me are looking for this.

                 

                <!DOCTYPE html>

                <html>

                <head>

                <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

                <style type="text/css">

                  html { height: 90% }

                  body { height: 90%; margin: 0; padding: 0 }

                  #map_canvas { height: 100% }

                </style>

                <script type="text/javascript"

                    src="http://maps.googleapis.com/maps/api/js?sensor=false">

                </script>

                 

                <script type="text/javascript">

                var poly;

                var map;

                  function initialize() {

                    var latlng = new google.maps.LatLng(38.698044, -77.210411);

                    var myOptions = {

                      zoom: 8,

                      center: latlng,

                      mapTypeId: google.maps.MapTypeId.ROADMAP

                    };

                    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

                //var myLatLng = new google.maps.LatLng(0, -180);

                  }

                   var polyOptions = {

                    strokeColor: '#000000',

                    strokeOpacity: 1.0,

                    strokeWeight: 3

                  }

                  poly = new google.maps.Polyline(polyOptions);

                  poly.setMap(map);

                var path = new MVCArray;

                  $.getJSON('json.php', function(data) {

                  //var items = [];

                  $.each(data, function(key, val) {

                  path.push(new google.maps.LatLng(val.lat, val.longi));

                    });

                 

                });

                  var myOptions = {

                    zoom: 12,

                    //center: myLatLng,

                    mapTypeId: google.maps.MapTypeId.TERRAIN

                  };

                  </script>

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

                </head>

                <body onload="initialize()">

                  <div id="map_canvas" style="width:90%; height:100%"></div>

                  </body>

                  </html>

                • 5. Re: Google Maps how to add a polyline to this?
                  Ralph3616 Community Member

                  Thanks for trying to help me Gaurav.

                   

                  If I paste your code into a blank page I get a map without any markers or polylines. When I try to insert your code into my sample I get a blank page.

                   

                  I am not sure what you wanted me to do with your code. If you want me to copy / paste it into my sample and have both markers and polylines work can you be more specific as to exactly what and where to insert it. Ideally copy it into my sample so I can see what you had in mind.

                   

                  Thanks again