google maps api parameters

Hi experts,

I'm using google maps javascript api v3

I have a page called TestAmusementMap.aspx, the code for it is:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestAmusementMap.aspx.vb" Inherits="Map7.TestAmusementMap" %>

<!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 runat="server">
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<script type="text/javascript">
    var map = null;
    var geocoder = new google.maps.Geocoder();
    var info_window = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();
    function geocodeAddress(xmldata) {
        var parkname = xmldata.getElementsByTagName('parkname')[0].firstChild.data;
        var address = xmldata.getElementsByTagName('address')[0].firstChild.data;
        var city = xmldata.getElementsByTagName('city')[0].firstChild.data;
        var state = xmldata.getElementsByTagName('state')[0].firstChild.data;
        var zipcode = xmldata.getElementsByTagName('zipcode')[0].firstChild.data;
        var address_google_map = parkname + ', ' + address + ', ' + city + ', ' + state + ', ' + zipcode + ', USA';
        var info_text = parkname + '<br />' + address + '<br />' + city + ' ' + state + ' ' + zipcode + ' USA';

        geocoder.geocode
    ({ 'address': address_google_map },
    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            createMarker(results[0].geometry.location, info_text);
        } else {
            alert("geocode of " + address + " failed:" + status);
        }
    });
    }
    function createMarker(latlng, html) {
        var marker = new google.maps.Marker
            ({
                map: map,
                position: latlng
            });
        google.maps.event.addListener(marker, 'click', function () {
            info_window.setContent(html);
            info_window.open(map, marker);
        });
        bounds.extend(latlng); // Here we tell what are next viewport bounds
    }
    function initialize() {
        var myLatLng = new google.maps.LatLng(38.166811, -120.563965);
        var myOptions =
{
    zoom: 10,
    mapTypeControl: true,
    center: myLatLng,
    zoomControl: true,
    zoomControlOptions:
    {
        style: google.maps.ZoomControlStyle.SMALL
    },
    StreetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
        map = new google.maps.Map(document.getElementById('map'), myOptions);
        google.maps.event.addListener
   (map, 'click',
  function () {
      info_window.close();
  });

  downloadUrl('AmusementParks.xml',
  function (listings_data) {
      listings_data = xmlParse(listings_data);
      var markers = listings_data.documentElement.getElementsByTagName('park');
      var geocoder = new google.maps.Geocoder();
      for (var i = 0; i < markers.length; i++) {
          geocodeAddress(markers[i]);
      }
      google.maps.event.addListenerOnce(map, 'idle', function () { map.fitBounds(bounds); });
  });
    }
</script>
</head>
<body onload="initialize();">
<form id="form1" runat="server">
<div id="Div1"><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
<br />
<div id="map" style="width: 900px; height: 700px;"></div>
</form>
</body>
</html>

Open in new window


This map uses data from a static xml file called AmusementParks.xml
This is the code for this file:

<?xml version="1.0" encoding="utf-8" ?>
<parks>
  <park>
    <parkname>Disneyland</parkname>
    <address>700 W. Ball Road</address>
    <city>Anaheim</city>
    <state>CA</state>
    <zipcode>92802</zipcode>
  </park>
  <park>
    <parkname>Knotts Berry Farm</parkname>
    <address>8039 Beach Boulevard</address>
    <city>Buena Park</city>
    <state>CA</state>
    <zipcode>90620</zipcode> 
  </park>
  <park>
    <parkname>Magic Mountain</parkname>
    <address>26101 Magic Mountain Parkway</address>
    <city>Valencia</city>
    <state>CA</state>
    <zipcode>91355</zipcode>
  </park>
  <park>
    <parkname>Universal Studios</parkname>
    <address>100 Universal City Plaza</address>
    <city>Anaheim</city>
    <state>Universal City</state>
    <zipcode>91608</zipcode>
  </park>
  <park>
    <parkname>Great America</parkname>
    <address>4701 Great America Parkway</address>
    <city>Santa Clara</city>
    <state>CA</state>
    <zipcode>95054</zipcode>
  </park>
</parks>

Open in new window


My asp page also uses a javascript file called downloadxml.js which is in a folder called scripts of my application directory. This is the code for it:

/**
* Returns an XMLHttp instance to use for asynchronous
* downloading. This method will never throw an exception, but will
* return NULL if the browser does not support XmlHttp for any reason.
* @return {XMLHttpRequest|Null}
*/
function createXmlHttpRequest() {
 try {
   if (typeof ActiveXObject != 'undefined') {
     return new ActiveXObject('Microsoft.XMLHTTP');
   } else if (window["XMLHttpRequest"]) {
     return new XMLHttpRequest();
   }
 } catch (e) {
   changeStatus(e);
 }
 return null;
};

/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback) {
 var status = -1;
 var request = createXmlHttpRequest();
 if (!request) {
   return false;
 }

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     try {
       status = request.status;
     } catch (e) {
       // Usually indicates request timed out in FF.
     }
     if ((status == 200) || (status == 0)) {
       callback(request.responseText, request.status);
       request.onreadystatechange = function() {};
     }
   }
 }
 request.open('GET', url, true);
 try {
   request.send(null);
 } catch (e) {
   changeStatus(e);
 }
};

/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}

/**
 * Appends a JavaScript file to the page.
 * @param {string} url
 */
function downloadScript(url) {
  var script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}

Open in new window


When I run my asp page i get the following map:

when I run my page.
My map works fine and all the items in my xml file are plotted on the map.
When I click on a point, it shows the name of the amusement park and address of the item in the marker popup window.

If you notice above my map , I have  a asp label.

Is it possible for when I click on a marker on my map, to pass the value of the Amusement park name from the marker to the asp label.

So for example if I click on the Disneyland marker, when i click on the marker and the infowindow on the map popups up, then at the same time, the word "Disneyland" is passed to my asp label?

can anyone help?
LVL 1
maqskywalkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Carl TawnSystems and Integration DeveloperCommented:
You should be able to. This part:
        google.maps.event.addListener(marker, 'click', function () {
            info_window.setContent(html);
            info_window.open(map, marker);
        });

Open in new window

is adding a listener for when the marker is clicked, so you should be able to inject a bit of code in there. You will need to parse out the "html" argument to get the data you want and then drop it into your label.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.