How to connect two markers with a line in Google maps api3

Question

I have made a html file which takes data from an XML file and uses the data on it to plot two markers on a map is there any way I could connect these two markers which have no permanent position this is my code for the markers.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var map;
window.onload=function ()
{
    var myLatlng = new google.maps.LatLng(0,0);
    var mapOptions = {
        zoom: 4,
        center: myLatlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //google.maps.event.addDomListener(window, 'load', mapready);
    getdata();
    setInterval(function () {getdata()}, 1000);
}

function getdata() 
{
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
   xmlhttp.open("GET","xxxxxxxxxxx",true);
   xmlhttp.onreadystatechange=function () {gotdata()};
   xmlhttp.send();
}
var lastCoordinates={};
var polyline = new google.maps.Polyline({map:map})
var path = [];
function gotdata(){

    if (xmlhttp.readyState == 4){

        var d = xmlhttp.responseXML.documentElement 
            //innerHTML shouldn't work for XML-Nodes
            y = d.getElementsByTagName("y")[0].textContent,
            x = d.getElementsByTagName("x")[0].textContent,
            h = [x,y].join('_');
        if(lastCoordinates[h]){
          return;
        } 

        lastCoordinates[h]= new google.maps.Marker({
                              position: new google.maps.LatLng(x,y),
                              map: map,
                              title: 'YAY'
                            });
         path.push(lastcoordinates[h].getPosition());
         if (path.length >= 2) {
           polyline.setPath(path);
         }

    }
}

this is what's in my XML file

<Location>
<x>42</x>
<y>14</y>
</Location>

It takes the x and y data from this and when I alter it the map creates another file.

Answer 1

create a polyline (See the documentation for options availble)

 var polyline = new google.maps.Polyline({ // set desired options for color, opacity, width, etc. strokeColor:"#0000FF", // blue (RRGGBB, R=red, G=green, B=blue) strokeOpacity: 0.4 // opacity of line }); // create the polyline (global) var path = []; // global variable to hold all the past locations

update it with your points

 function gotdata(){ if (xmlhttp.readyState == 4){ var d = xmlhttp.responseXML.documentElement //innerHTML shouldn't work for XML-Nodes y = d.getElementsByTagName("y")[0].textContent, x = d.getElementsByTagName("x")[0].textContent, h = [x,y].join('_'); if(lastCoordinates[h]){ return; } lastCoordinates[h]= new google.maps.Marker({ position: new google.maps.LatLng(x,y), map: map, title: 'YAY' }); path.push(lastCoordinates[h].getPosition()); if (path.length >= 2) { // display the polyline once it has more than one point polyline.setMap(map); polyline.setPath(path); } } }

proof of concept fiddle

code snippet:

 var geocoder; var map; var lastCoordinates = []; var count = 0; var polyline = new google.maps.Polyline({ // set desired options for color width strokeColor:"#0000FF", // blue (RRGGBB, R=red, G=green, B=blue) strokeOpacity: 0.4 // opacity of line }); // create the polyline (global) var path = []; // global variable to hold all the past locations function initialize() { map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); setInterval(gotdata, 1000); } google.maps.event.addDomListener(window, "load", initialize); function gotdata() { // if (xmlhttp.readyState == 4){ count++; // var d = xmlhttp.responseXML.documentElement //innerHTML shouldn't work for XML-Nodes y = count * 0.01; // d.getElementsByTagName("y")[0].textContent, x = count * 0.01; //d.getElementsByTagName("x")[0].textContent, h = [x, y].join('_'); if (lastCoordinates[h]) { return; } lastCoordinates[h] = new google.maps.Marker({ position: new google.maps.LatLng(x, y), map: map, title: 'YAY' }); map.panTo(lastCoordinates[h].getPosition()); path.push(lastCoordinates[h].getPosition()); if (path.length >= 2) { // display the polyline once it has more than one point polyline.setMap(map); polyline.setPath(path); } // } }

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas" style="border: 2px solid #3872ac;"></div>

How to connect two markers with a line in Google maps api3

Question

1 answers

solution1
4 ACCPTED 2015-06-05 13:42:33

How to connect two markers with a line in Google maps api3

Question

1 answers

solution1 4 ACCPTED 2015-06-05 13:42:33

solution1
4 ACCPTED 2015-06-05 13:42:33