[Google Maps API v3] Modify "From Info Windows to a Database" to a function

Fri, 09 Apr 2010 14:18:11 -0700 

Hello. I am trying to combine the functionality of two code samples
found here:

Using PHP/MySQL with Google Maps  
http://code.google.com/apis/maps/articles/phpsqlajax_v3.html

>From Info Windows to a Database: Saving User-Added Form Data
http://code.google.com/apis/maps/articles/phpsqlinfo_v3.html

The first example displays points from a MySQL db on the map. The
second takes form content and creates a new marker with database info.
Both of these work fine by themselves so I know MySQL and PHP are
setup correctly.

What I would like to do is while displaying the marker data from the
db, add a button so user can click button to "Add Point" and then
click on the map to add a new marker. I am somewhat new to web
development and am having trouble figuring out how to combine these
functions.

I would also like to have the InfoWindow pop up automatically when the
user clicks the map to add the marker. The code currently requires
that the user first click the map to add a marker, then click the
marker to have InfoWindow pop up.

Here is my attempt at combining these functions. It basically behaves
the same as the "Using PHP/MySQL with Google Maps" code except it
shows a button on top that does not seem to function. Any help you can
give would be greatly appreciated. Thank you in advance. Aaron

<html xmlns="http://www.w3.org/1999/xhtml";>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false";
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/
mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/
mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/
mm_20_shadow.png'
      }
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(32.7356, -117.2493),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      downloadUrl("GoogleTest.php", function(data) {
        var xml = parseXml(data);
        var markers =
xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function AddMarker() {
        var map = new
google.maps.Map(document.getElementById("map_canvas"), options);
        var html = "<table>" +
                 "<tr><td>Name:</td> <td><input type='text' id='name'/
> </td> </tr>" +
                 "<tr><td>Address:</td> <td><input type='text'
id='address'/></td> </tr>" +
                 "<tr><td>Type:</td> <td><select id='type'>" +
                 "<option value='bar' SELECTED>bar</option>" +
                 "<option value='restaurant'>restaurant</option>" +
                 "</select> </td></tr>" +
                 "<tr><td></td><td><input type='button' value='Save &
Close' onclick='saveData()'/></td></tr>";
        infowindow = new google.maps.InfoWindow({
        content: html
        });

        google.maps.event.addListener(map, "click", function(event) {
                marker = new google.maps.Marker({
                        position: event.latLng,
                        map: map  });});
        google.maps.event.addListener(marker, "click", function() {
                infowindow.open(map, marker); });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    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.responseText, request.status);
        }
      };

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

    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }

    function doNothing() {}

  </script>
  </head>

  <body onload="load()">
        <input type="button" onclick="AddMarker()" value="Add Point" />
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to