Search Results

Search found 31 results on 2 pages for 'openinfowindowhtml'.

Page 2/2 | < Previous Page | 1 2 

  • How can I make Google Maps icon to always appear in the center of map - when clicked?

    - by JHM_67
    For simplicity sake, lets use the XML example on Econym's site. http://econym.org.uk/gmap/example_map3.htm Once clicked, I would like icon balloon to be displayed in the middle of the map. What might I need to add to Mike's code to get this to work? I apologize for asking a lot.. Thanks in advance. <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { side_bar var side_bar_html = ""; var gmarkers = []; function createMarker(point,name,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); gmarkers.push(marker); side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; return marker; } function myclick(i) { GEvent.trigger(gmarkers[i], "click"); } var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng( 43.907787,-79.359741), 9); GDownloadUrl("example.xml", function(doc) { var xmlDoc = GXml.parse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); var marker = createMarker(point,label,html); map.addOverlay(marker); } document.getElementById("side_bar").innerHTML = side_bar_html; }); } else { alert("Sorry, the Google Maps API is not compatible with this browser"); } //]]> </script>

    Read the article

  • Google Maps: remember id of marker with open info window

    - by AP257
    I have a Google map that is showing a number of markers. When the user moves the map, the markers are redrawn for the new boundaries, using the code below: GEvent.addListener(map, "moveend", function() { var newBounds = map.getBounds(); for(var i = 0; i < places_json.places.length ; i++) { // if marker is within the new bounds then do... var latlng = new GLatLng(places_json.places[i].lat, places_json.places[i].lon); var html = "blah"; var marker = createMarker(latlng, html); map.addOverlay(marker); } }); My question is simple. If the user has clicked on a marker so that it is showing an open info window, currently when the boundaries are redrawn the info window is closed, because the marker is added again from scratch. How can I prevent this? It is not ideal, because often the boundaries are redrawn when the user clicks on a marker and the map moves to display the info window - so the info window appears and then disappears again :) I guess there are a couple of possible ways: remember which marker has an open info window, and open it again when the markers are redrawn don't actually re-add the marker with an open info window, just leave it there However, both require the marker with an open window to have some kind of ID number, and I don't know that this is actually the case in the Google Maps API. Anyone? ----------UPDATE------------------ I've tried doing it by loading the markers into an initial array, as suggested. This loads OK, but the page crashes after the map is dragged. <script type="text/javascript" src="{{ MEDIA_URL }}js/markerclusterer.js"></script> <script type='text/javascript'> function createMarker(point,html, hideMarker) { //alert('createMarker'); var icon = new GIcon(G_DEFAULT_ICON); icon.image = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png"; var tmpMarker = new GMarker(point, {icon: icon, hide: hideMarker}); GEvent.addListener(tmpMarker, "click", function() { tmpMarker.openInfoWindowHtml(html); }); return tmpMarker; } var map = new GMap2(document.getElementById("map_canvas")); map.addControl(new GSmallMapControl()); var mapLatLng = new GLatLng({{ place.lat }}, {{ place.lon }}); map.setCenter(mapLatLng, 12); map.addOverlay(new GMarker(mapLatLng)); // load initial markers from json array var markers = []; var initialBounds = map.getBounds(); for(var i = 0; i < places_json.places.length ; i++) { var latlng = new GLatLng(places_json.places[i].lat, places_json.places[i].lon); var html = "<strong><a href='/place/" + places_json.places[i].placesidx + "/" + places_json.places[i].area + "'>" + places_json.places[i].area + "</a></strong><br/>" + places_json.places[i].county; var hideMarker = true; if((initialBounds.getSouthWest().lat() < places_json.places[i].lat) && (places_json.places[i].lat < initialBounds.getNorthEast().lat()) && (initialBounds.getSouthWest().lng() < places_json.places[i].lon) && (places_json.places[i].lon < initialBounds.getNorthEast().lng()) && (places_json.places[i].placesidx != {{ place.placesidx }})) { hideMarker = false; } var marker = createMarker(latlng, html, hideMarker); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers, {maxZoom: 11}); </script>

    Read the article

  • <div> of images, retrieved by getJSON, disappear after append()

    - by Midiane
    Hi all I'm working on a GMaps application to retrieve images, via getJSON(), and to populate a popup marker. The following is the markup which I add to the marker dynamically: <div id="images"></div> <div id="CampWindow" style="display:none;width:550px;height:500px;"> <h4 id="camp-title"></h4> <p>View... (all links open in new windows)</p> <ul> <li><a id="camp-hp-link" target="_blank" href="">camp home page</a></li> <li>information: <a id="camp-av-link" target="_blank" href="">availability</a> | <a id="camp-vi-link" target="_blank" href="">vital information</li> </ul> <p id="message"></p> I've been clawing out my eyes and woohoo for the past couple of days, trying to get the images to show inside the CampWindow . Then, I decided to think laterally and to see if the images were being retrieved at all. I then moved the images outside and sure as Bob (Hope), the images were being retrieved and refreshed with every click. So, I decided to the keep the images outside and then once loaded, append it to the CampWindow . It's not working still; when I append the div to the main CampWindow div, the images won't show. I check in Firebug with the pointer thingy and it shows me the images as empty. I try it again with the images outside and it shows the images. I've tried before append and appendTo with no success. Am I missing something here? I have no more woohoo to claw out. Please, please help. marker.clicked = function(marker){ $("#images").html(''); $('#camp-title').text(this.name); $('#camp-hp-link').attr('href', this.url); $('#camp-av-link').attr('href', this.url + '/tourism/availability.php'); $('#camp-vi-link').attr('href', this.url + '/tourism/general.php'); // get resort images via jQuery AJAX call - includes/GetResortImages.inc.php $.getJSON('./includes/GetResortImages.inc.php', { park: this.park_name, camp: this.camp_name }, RetrieveImages); function RetrieveImages (data) { if ('failed' == data.status) { $('#messages').append("<em>We don't have any images for this rest camp right now!</em>"); } else { if ('' != data.camp) { $.each(data, function(key,value){ $("<img/>").attr("src", value).appendTo('#images'); }); } } } //.append($("#images")); $("#CampWindow").show(); var windowContent = $("<html />"); $("#CampWindow").appendTo(windowContent); var infoWindowAnchor = marker.getIcon().infoWindowAnchor; var iconAnchor = marker.getIcon().iconAnchor; var offset = new google.maps.Size(infoWindowAnchor.x-iconAnchor.x,infoWindowAnchor.y-iconAnchor.y); map.openInfoWindowHtml(marker.getLatLng(), windowContent.html(), {pixelOffset:offset}); } markers.push(marker); });

    Read the article

  • Passing GLatLng from array to Google

    - by E. Rose
    Hello All, To preface this, I am a complete programming amateur so this may be quite easily solved. As is though, it is frustrating me to no end. Basically, I have a database of Venue Names with GLat and GLng (other stuff too) that I am pulling down to my website based on a geolocated search. The javascript that I have pulls in a formatted subset of the database, dumps the glat and glng into an array and is supposed to take those points and plot out several markers each with an info window containing the details behind each marker. For some reason, the marker geodata is not being populated and/or is not being passed. The array is declared using [] and will not work when normally declared using (). It only brings up a map with the first value in the array and goes blank if i try to manually input later entries. There is a large block of commented out code relating to directions generation. That code worked for some reason. If anyone can tell me what I am doing wrong in rewriting it to map the markers and not give directions, please tell me. Any help would be much appreciated. var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; google.load("maps", "2", {"other_params":"sensor=true"}); var map function initialize(){ window.map = new google.maps.Map2(document.getElementById("map")); map.addControl(new GLargeMapControl()); } google.setOnLoadCallback(initialize); function getVenueResults(_zip, _num, _remove){ var rFlag = ''; if(_remove != null){ rFlag = "&removeId=" + _remove; } var url = 'ajax/getVenues.php?zip=' + _zip + "&num=" + _num + rFlag; new Ajax.Updater('resultsContainer', url, { onComplete: processResults }); } function processResults(){ window.map.clearOverlays(); var waypoints = []; var resultsList = $$('.resultWrapper'); var stepList = $$('.resultDirections'); for(i=0; i for(i=0; i<resultsList.length; i++){ var resultsElem = resultsList[i]; resultsElem.removeClassName('firstResult'); resultsElem.removeClassName('lastResult'); if(i == 0){ resultsElem.addClassName('firstResult'); } if(i == resultsList.length - 1){ resultsElem.addClassName('lastResult'); } var insertContent = '<div class="resultDirections" id="resultDirections' + i + '"></div>'; Element.insert(resultsElem, { bottom : insertContent }) var num = resultsElem.getElementsByClassName('numHolder'); num[0].innerHTML = '<b>' + letters[i] + ".</b> "; var geolat = resultsElem.getElementsByClassName('geolat')[0].value; var geolong = resultsElem.getElementsByClassName('geolong')[0].value; var point = new GLatLng(geolat, geolong); waypoints[i] = point; } if(waypoints.length == 1){ map.setCenter(waypoints[0], 16); map.addOverlay(new GMarker(waypoints[0])); resultsElem.getElementsByClassName('numHolder')[0].innerHTML = ''; }else{ map.setCenter(waypoints[0], 16); for(j=0; j< waypoints.length; j++) { var vLoc = waypoints[j]; var vInfo = resultsElem.getElementByClassName('resultBox[j]]').innerHTML; //unfinished function to mine name out of div and make it the marker title //x = resultsElem.getElementsByTagName("b"); // for (i=0;i<x.length;i++) // //marker.value = resultsElem.getElementBy('numHolder').innerHTML var marker = createMarker(vLoc, vInfo); map.addOverlay(marker); } } function createMarker(vLoc, vInfo) { var marker = (new GMarker(vLoc)); var cont = vInfo; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(cont); }); return marker; } //var directions = new GDirections(window.map, document.getElementById('directionsPanel')); //directions.loadFromWaypoints(waypoints, { travelMode: G_TRAVEL_MODE_WALKING }); //GEvent.addListener(directions, "load" , function() { // var numRoutes = directions.getNumRoutes(); // for(j=0; j< numRoutes; j++){ // var thisRoute = directions.getRoute(j); // var routeText = ''; // for(k=0; k < thisRoute.getNumSteps(); k++){ // var thisStep = thisRoute.getStep(k); // if(k != 0){ routeText += " &nbsp;||&nbsp; "; } // routeText += thisStep.getDescriptionHtml(); // } // $('resultDirections' + j).innerHTML = routeText; // } // $('resultDirections' + numRoutes).hide(); //}); } function moveUp(_obj){ var parentObj = $(_obj).up().up(); var prevSib = parentObj.previous(); prevSib.insert({before: parentObj}); processResults(); } function moveDown(_obj){ var parentObj = $(_obj).up().up(); var nextSib = parentObj.next(); nextSib.insert({after: parentObj}); processResults(); }

    Read the article

  • Which code snipplets in PHP can create a input form, which creates a new set of data in my mysql dat

    - by smiyazaki
    I am using the Google Maps API with parts in javascript and others in PHP. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Google Maps AJAX + mySQL/PHP Example // var iconBlue = new GIcon(); iconBlue.image = 'icon.png'; iconBlue.shadow = ''; iconBlue.iconSize = new GSize(19, 19); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBlue.infoWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = 'icon.png'; iconRed.shadow = ''; iconRed.iconSize = new GSize(19, 19); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(6, 20); iconRed.infoWindowAnchor = new GPoint(5, 1); var customIcons = []; customIcons["restaurant"] = iconBlue; customIcons["bar"] = iconRed; function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setMapType(G_SATELLITE_MAP); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(47.614495, -122.341861), 13); // Change this depending on the name of your PHP file GDownloadUrl("phpsqlajax_genxml.php", function(data) { var xml = GXml.parse(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 GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(point, name, address, type); map.addOverlay(marker); } }); } } function createMarker(point, name, address, type) { var marker = new GMarker(point, customIcons[type]); var html = "<b>" + name + "</b> <br/>" + address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> (I suppose the php will be called by "GDownloadUrl("phpsqlajax_genxml.php", function(data) { ..." in the javascript part of the sourcecode of phpsqlajax_map.htm) Now I need another php file and the code snipplets for it, which creates an input form where I can add some new locations to the google map. Following code is used to create the xml file here: http://detektors.de/maptest/phpsqlajax_genxml.php The next step would be, trying to make an plugin for wordpress that I could easily post a blog entry with a new location on the same map, which displays already some other locations stored in the mysql database. thanks! <?php require("phpsqlajax_dbinfo.php"); function parseToXML($htmlStr) { $xmlStr=str_replace('<','<',$htmlStr); $xmlStr=str_replace('','>',$xmlStr); $xmlStr=str_replace('"','"',$xmlStr); $xmlStr=str_replace("'",''',$xmlStr); $xmlStr=str_replace("&",'&',$xmlStr); return $xmlStr; } // Opens a connection to a MySQL server $connection=mysql_connect ($host, $username, $password); if (!$connection) { die('Not connected : ' . mysql_error()); } // Set the active MySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ('Can\'t use db : ' . mysql_error()); } // Select all the rows in the markers table $query = "SELECT * FROM markers WHERE 1"; $result = mysql_query($query); if (!$result) { die('Invalid query: ' . mysql_error()); } header("Content-type: text/xml"); // Start XML file, echo parent node echo ''; // Iterate through the rows, printing XML nodes for each while ($row = @mysql_fetch_assoc($result)){ // ADD TO XML DOCUMENT NODE echo ''; } // End XML file echo ''; ?

    Read the article

  • What sort of loop structure to compare checkbox matrix with Google Maps markers?

    - by Kirkman14
    I'm trying to build a map of trails around my town. I'm using an XML file to hold all the trail data. For each marker, I have categories like "surface," "difficulty," "uses," etc. I have seen many examples of Google Maps that use checkboxes to show markers by category. However these examples are usually very simple: maybe three different checkboxes. What's different on my end is that I have multiple categories, and within each category there are several possible values. So, a particular trail might have "use" values of "hiking," "biking," "jogging," and "equestrian" because all are allowed. I put together one version, which you can see here: http://www.joshrenaud.com/pd/trails_withcheckboxes3.html In this version, any trail that has any value checked by the user will be displayed on the map. This version works. (although I should point out there is a bug where despite only one category being checked on load, all markers display anyway. After your first click on any checkbox, the map will work properly) However I now realize it's not quite what I want. I want to change it so that it will display only markers that match ALL the values that are checked (rather than ANY, which is what the example above does). I took a hack at this. You can see the result online, but I can't type a link to it because I am new user. Change the "3" in the URL above to a "4" to see it. My questions are about this SECOND url. (trails_withcheckboxes4.html) It doesn't work. I am pretty new to Javascript, so I am sure I have done something totally wrong, but I can't figure out what. My specific questions: Does anyone see anything glaringly obvious that is keeping my second example from working? If not, could someone just suggest what sort of loop structure I would need to build to compare the several arrays of checkboxes with the several arrays of values on any given marker? Here is some of the relevant code, although you can just view source on the examples above to see the whole thing: function createMarker(point,surface,difficulty,use,html) { var marker = new GMarker(point,GIcon); marker.mysurface = surface; marker.mydifficulty = difficulty; marker.myuse = use; GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); gmarkers.push(marker); return marker; } function show() { hide(); var surfaceChecked = []; var difficultyChecked = []; var useChecked = []; var j=0; // okay, let's run through the checkbox elements and make arrays to serve as holders of any values the user has checked. for (i=0; i<surfaceArray.length; i++) { if (document.getElementById('surface'+surfaceArray[i]).checked == true) { surfaceChecked[j] = surfaceArray[i]; j++; } } j=0; for (i=0; i<difficultyArray.length; i++) { if (document.getElementById('difficulty'+difficultyArray[i]).checked == true) { difficultyChecked[j] = difficultyArray[i]; j++; } } j=0; for (i=0; i<useArray.length; i++) { if (document.getElementById('use'+useArray[i]).checked == true) { useChecked[j] = useArray[i]; j++; } } //now that we have our 'xxxChecked' holders, it's time to go through all the markers and see which to show. for (var k=0; k<gmarkers.length; k++) { // this loop runs thru all markers var surfaceMatches = []; var difficultyMatches = []; var useMatches = []; var surfaceOK = false; var difficultyOK = false; var useOK = false; for (var l=0; l<surfaceChecked.length; l++) { // this loops runs through all checked Surface categories for (var m=0; m<gmarkers[k].mysurface.length; m++) { // this loops through all surfaces on the marker if (gmarkers[k].mysurface[m].childNodes[0].nodeValue == surfaceChecked[l]) { surfaceMatches[l] = true; } } } for (l=0; l<difficultyChecked.length; l++) { // this loops runs through all checked Difficulty categories for (m=0; m<gmarkers[k].mydifficulty.length; m++) { // this loops through all difficulties on the marker if (gmarkers[k].mydifficulty[m].childNodes[0].nodeValue == difficultyChecked[l]) { difficultyMatches[l] = true; } } } for (l=0; l<useChecked.length; l++) { // this loops runs through all checked Use categories for (m=0; m<gmarkers[k].myuse.length; m++) { // this loops through all uses on the marker if (gmarkers[k].myuse[m].childNodes[0].nodeValue == useChecked[l]) { useMatches[l] = true; } } } // now it's time to loop thru the Match arrays and make sure they are all completely true. for (m=0; m<surfaceMatches.length; m++) { if (surfaceMatches[m] == true) { surfaceOK = true; } else if (surfaceMatches[m] == false) {surfaceOK = false; break; } } for (m=0; m<difficultyMatches.length; m++) { if (difficultyMatches[m] == true) { difficultyOK = true; } else if (difficultyMatches[m] == false) {difficultyOK = false; break; } } for (m=0; m<useMatches.length; m++) { if (useMatches[m] == true) { useOK = true; } else if (useMatches[m] == false) {useOK = false; break; } } // And finally, if each of the three OK's is true, then let's show the marker. if ((surfaceOK == true) && (difficultyOK == true) && (useOK == true)) { gmarkers[i].show(); } } }

    Read the article

< Previous Page | 1 2