Hey Beach Bum, It would help significantly if you provided a link to your demo as opposed to pasting the entire code snippet in the body.
Do you have one available? Thanks, Dann On Fri, Apr 9, 2010 at 2:12 PM, Beach Bum <[email protected]> wrote: > 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]<google-maps-js-api-v3%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-maps-js-api-v3?hl=en. > > -- Daniel Lee Developer Programs Engineer Google, Inc. 345 Spear Street San Francisco, CA 94105 650 253 0967 -- 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.
