Skip navigation
Currently Being Moderated

Google Maps how to add a polyline to this?

Sep 1, 2012 10:06 AM

Tags: #web_design

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>
 
Replies
  • Currently Being Moderated
    Sep 3, 2012 11:04 AM   in reply to Ralph3616

    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#P olylines

     

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

     

     

    that might be helpful for you.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 11:38 AM   in reply to Ralph3616

    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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points