Multiple Map Markers With Infoboxes From Parsed Xml

July 28, 2023 Post a Comment

I know I'm fairly close to solving this, I just need a little push in the right direction. I'm generating XML from a database that has marker locations and some other data that sh

Solution 1:

Not tested:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="styles.css" rel="stylesheet" type="text/css">
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?     key=MY_KEY&sensor=true"></script>
    <script type="text/javascript" src="infobox.js"></script>
    <script type="text/javascript">

var mapstyle = [styles-removed-for-space]

var icon = 'mapicon.png';

//<![CDATA[

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(10,-10),
    zoom: 3,
    minZoom: 3,
    disableDefaultUI: true,
    styles: mapstyle,
    mapTypeId: 'roadmap'
  });

  var name = [];

  downloadUrl("genxml.php", function(data) {
    var xml = data.responseXML;
    var places = xml.documentElement.getElementsByTagName("place");
    for (var x = 0; x < places.length; x++) {
      var getname = places[x].getAttribute("name");
      name.push(getname);
      var address = places[x].getAttribute("address");
      var point = new google.maps.LatLng(
          parseFloat(places[x].getAttribute("lat")),
          parseFloat(places[x].getAttribute("lng")));
      createMarker(point, address, getname, name);
    }

  });
}

function createMarker(point, address, getname, name) {
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon,
        title: getname
      });

      var boxText = document.createElement("div");
      boxText.id = "infobox"
      boxText.style.cssText = " margin-top: 8px; background: white; padding: 5px;";
      boxText.innerHTML = name[x];

      var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-250, -173)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat"
          ,opacity: 0.75
          ,width: "500px"
          ,height: "300px"
          ,textAlign: "center"
         }
        ,closeBoxMargin: "13px 5px 0px 0px"
        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
        };

      var ib = new InfoBox(myOptions);

      google.maps.event.addListener(marker, 'click', function(e) {
        map.setZoom(13);
        map.setCenter(this.getPosition());
        ib.open(map, this);
      });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

//]]>

</script>

</head>

    <body onload="load()">
       <div id="map" style="width:100%; height:100%"></div>
    </body>
</html>

JavaScript Test

Multiple Map Markers With Infoboxes From Parsed Xml

Solution 1:

Post a Comment for "Multiple Map Markers With Infoboxes From Parsed Xml"