CODEWITHSUNDEEP
javascripthtmlxml
ash
ash

Reputation: 3

problem in javascript

I am using the following code ,here I am showing addresses of properties.xml with markers on google map. It gives me no error but also displaying nothing on google map.

Can anybody tell me where is the problem in my code?

properties.xml file:

<properties>
<property>
<type>apartment</type>
<address>538 Little Lonsdale Street,Melbourne,VIC </address>
</property>
<property>
<type>apartment</type>
<address>196 Little Lonsdale Street,Melbourne,VIC</address>
</property>
<property>
<type>apartment</type>
<address>5/5 Close Ave,Dandenong,VIC </address>
</property>
</properties>

html file:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>property</title> 
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAB1CHU9LrppxpqwUwaxkvTBRIez7zTAJDrX7CdEV86wzEyVzTHBQKDxL9qiopaHZkOJ8F2t0RQW9W8A"
      type="text/javascript"></script>
<script type="text/javascript" src="map.js"></script> 
</head>

<body onload="load()" onunload="GUnload()">

<div id="map" style="width: 500px; height: 400px"></div>

</body>
</html>

map.js file:

    var map;
    var geocoder;
    var xml;
    var property;
    var address;

   function load()
   {

      map = new GMap2(document.getElementById("map"));        
     map.setCenter(new GLatLng(-24.994167,134.866944), 4);

      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      geocoder = new GClientGeocoder();

      GDownloadUrl("../../data/properties.xml", function(data) {
          xml = GXml.parse(data);
          property = xml.documentElement.getElementsByTagName("property");
          for (var i = 0; i < property.length; i++) {
            address = property[i].getElementsByTagName("address");
            address = address.firstChild.nodeValue;

           geocoder.getLocations(address, addToMap);}
        });   
   }


   function addToMap(response)
   {

      place = response.Placemark[0];

      point = new GLatLng(place.Point.coordinates[1],
                          place.Point.coordinates[0]);

      marker = new GMarker(point);
      map.addOverlay(marker);


   }

Upvotes: 0

Views: 101

Answers (1)

tradyblix
tradyblix

Reputation: 7569

I tried your code and got the maps displaying on first load but there was a JS error. It was this particular line:

address = address.firstChild.nodeValue;

Should be this to get the text inside <address>:

address = address[0].childNodes[0].nodeValue;

Here is a portion of the map when it worked:

Here is a portion of the map that I saw when it worked

Just to mention that I couldn't see any markers at first so I replaced:

map.setCenter(new GLatLng(37.997022, -122.6), 11);

with:

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

Not sure if that's what you're expecting but that's how it turned out.

*UPDATE* To create a marker you can use this function

function createMarker(point, address)
{
   var marker = new GMarker(point);
   GEvent.addListener(marker, "click", function() {
   map.openInfoWindowHtml(point, address);
   });
   return marker;
}

Apply the createMarker to map.addOverlay:

map.addOverlay(createMarker(point, response.name));

Upvotes: 1

Related Questions