0

I am making a Polyline on google maps. But i can't see it. Following is the code:

  $('#mapdiv').html('<div id="map_convas" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>');

  var centerLatLng = new google.maps.LatLng(obj[i].centerlat, obj[i].centerlong);

  var myOptions = {
   center: centerLatLng,
   zoom: 17,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   draggable: true
  };
  var map_polyline;

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

  var marker = new google.maps.Marker({
   clickable: true,
   position: centerLatLng,
   map: map,
   zIndex: 1
  });
  marker.setIcon('http://localhost:8888/images/marker.png');

  var locations = obj[0].locations;
// in my current case locations.length is 1                       
  for(var p=0; p<locations.length; p++){

  var triangleCoords = new Array();

  var markerArray = locations[p];
  for(var x=0;x<markerArray.length;x++){
        triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude));
  }
  map_polyline = new google.maps.Polyline({
       path: triangleCoords,
       strokeColor: "#FF0000",
       strokeOpacity: 1.0,
       strokeWeight: 2
  });
  map_polyline.setMap(map);
 }

 // doing some stuff

 google.maps.event.trigger(map, "resize");

Json which i am parsing and making obj is following:

 [
{
    "centerlat": 55.68369272317236,
    "centerlong": 13.176000376097194,
    "locations": [
        [
            {
                "longitude": 13.17480473780369,
                "latitude": 13.17480473780369
            },
            {
                "longitude": 13.17456847989296,
                "latitude": 13.17456847989296
            },
            {
                "longitude": 13.17426541821395,
                "latitude": 13.17426541821395
            },
            {
                "longitude": 13.1741324253503,
                "latitude": 13.1741324253503
            },
            {
                "longitude": 13.17386236043011,
                "latitude": 13.17386236043011
            },
            {
                "longitude": 13.17352138460909,
                "latitude": 13.17352138460909
            }
        ]
    ]
  }
 ]

and i am parsing it using following line of code:

 var obj = jQuery.parseJSON(result);

Everything else like center of map, marker and size is working fine. The only thing is that i can not see any polyline on the map. i put some alert to check values of markerArray and triangleCoords. They are fine. Can anybody tell me why can't i see the polylines? I am using more maps intances before. Is there any problem because of them? Thanks in advance.

Kara
  • 6,115
  • 16
  • 50
  • 57
Piscean
  • 3,069
  • 12
  • 47
  • 96
  • There's no indication in your code about what `markerArray` is and how its elements are set up. As the line coordinates come directly from that, that's quite important. – Andrew Leach Aug 10 '12 at 10:32
  • edited my question. json which i am parsing is there. – Piscean Aug 10 '12 at 10:39
  • You have
    but then getElementById("kingdommap_convas"). Why the difference?
     – Marcelo Aug 10 '12 at 11:41
  • Sorry i was trying to make my question as simple as i can. So i forgot to change kingdommap_convas to map convas. But in real code its same at both places – Piscean Aug 10 '12 at 12:14
  • I found the problem. I am putting only langitude in json array. Even in place of latitude i am putting longitude. Sorry for that. Now its working fine. – Piscean Aug 10 '12 at 12:27
  • possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – Piscean Aug 10 '12 at 12:27

0 Answers0