JavaScript - Inserting Google Maps Coordinates Into Text Field After Marker Location Updated

how can I get my custom markers to show?
I have got my code in place, everything works except, doesn't show my
custom marker?!

here is my code:

Code:

<script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the
function closure
      // Each instance of the function preserves the contends of a
different instance
      // of the "marker" and "html" variables which will be needed
later when the event triggers.
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
                  marker.image = "images/google-pin.png";
                  marker.shadow = "images/google-pin-shadow.png";
                  marker.iconSize = new GSize(90, 70);
                  marker.shadowSize = new GSize(90, 70);
                  markerOptions = { icon:marker };

        });
        return marker;
      }

      // Display the map, with some controls and set the initial
location
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(51.3992613899243,-1.32983778443008),
8);

      // Set up three markers with info windows

      var point = new GLatLng(51.4769752333875,-2.53517458867092);
      var marker = createMarker(point,'<div style="width:240px">Some
stuff to display in the First Info Window. With a <a href="http://
www.econym.demon.co.uk">Link<\/a> to my home page<\/div>')
      map.addOverlay(marker);

      var point = new GLatLng(50.8391656924497,-0.154312843280554);
      var marker = createMarker(point,'Some stuff to display in
the<br>Second Info Window')
      map.addOverlay(marker);

      var point = new GLatLng(50.8340528225749,-0.259947032613667);
      var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
      map.addOverlay(marker);

          var point = new GLatLng(51.5168824045344,-2.6926718990779);
      var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
      map.addOverlay(marker);

          var point = new GLatLng(50.954582894922,-0.145016932400171);
      var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
      map.addOverlay(marker);

    }

    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this
browser");
    }

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/
    // http://econym.org.uk/gmap/

    //]]>
    </script>

Right I have google maps connected to a database which holds stockists and their information. The user enters their postcode and radius and markers are put on the map of stockists in the radius of their postcode. I have this all working fine and the database chucks the information into an xml file fine. The problem im having is displaying the information in the pop up window of the marker.

PHP Code:
<script type="text/javascript">
    //<![CDATA[
    var map;
    var geocoder;

    function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(54.622978,-2.592773), 5);
      }
    }

   function searchLocations() {
     var address = document.getElementById('addressInput').value;
     geocoder.getLatLng(address, function(latlng) {
       if (!latlng) {
         alert(address + ' not found');
       } else {
         searchLocationsNear(latlng);
       }
     });
   }

   function searchLocationsNear(center) {
     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
       var markers = xml.documentElement.getElementsByTagName('marker');
       map.clearOverlays();

       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
       if (markers.length == 0) {
         sidebar.innerHTML = 'No results found.';
         map.setCenter(new GLatLng(54.622978,-2.592773), 5);
         return;
       }

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute('name');
         var address1 = markers[i].getAttribute('address1');
         var address2 = markers[i].getAttribute('address2');
         var town = markers[i].getAttribute('town');
         var county = markers[i].getAttribute('county');
         var postcode = markers[i].getAttribute('postcode');
         var telephone = markers[i].getAttribute('telephone');
         var distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));
         
         var marker = createMarker(point, name, address1, address2, town, postcode, telephone);
         map.addOverlay(marker);
         var sidebarEntry = createSidebarEntry(marker, name, town, distance);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
     });
   }

    function createMarker(point, name, address1, address2, town, postcode, telephone) {
      var marker = new GMarker(point);
      var html = '<b>' + name + '</b> <br/>' + address1 + '<br />' + address2 + '<br />' + town + '<br />' + postcode + '<br />' + telephone;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function createSidebarEntry(marker, name, town, distance) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + town;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }
    //]]>
  </script> 



Example Xml:
PHP Code:
<markers>
<marker name="AVON ANGLING CTR" address1="348 WHITEHALL ROAD" address2="ST. GEORGES" town="BRISTOL" county="AVON" postcode="BS5 7BP" telephone="01179 517250" lat="51.464432" lng="-2.546576" distance="0"/>
<marker name="SCOTT TACKLE" address1="42 SOUNDWELL ROAD" address2="STAPLE HILL" town="BRISTOL" county="AVON" postcode="BS16 4QP" telephone="01179 567371" lat="51.477093" lng="-2.507667" distance="1.8894400025753"/>
</markers> 


the only information displayed in the sidebar entry is the name and distance and on the marker just the name.

Would someone as be so kind to check my google maps script. For some reason the map is centering yet no marker (and info window) is being displayed.

I'm (foolishly) using php to echo out the lat and long and the info window content yet everything seems to output okay......

Did a quick java de-bug and found the following error;

Quote:
Error: myLatlng is not defined
Source File: xxx
Line: 45
However the lat and lng are echo' out okay and the map is centered on the co-ordinates????

Much thanks!!!!

Code:

<script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(53.989723,-7.361760),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
        
        var contentString = '<div>'+
        '<h3 id="fs">Alcohol Early Intervention Project (Cavan/Monaghan)</h1>'+
        '<div>'+
        '<p>Click here for a streetview map</p>'+
        '</div>'+
        '</div>';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
        
        var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        title:"Alcohol Early Intervention Project (Cavan/Monaghan)"
    });  
        var marker = new google.maps.Marker({
          position: map.getCenter(),
          map: map,
          title: 'Click to zoom'
        });

        google.maps.event.addListener(marker, 'click', function() {
          if (map.getZoom() == 13) {
            map.setZoom(4);
          } else {
            map.setZoom(8);
          }
        });
      }
    </script>

Hi,

I am trying to add markers to Google Maps, they are working fine but some of the markers are of same location, thus Google Map will show only one marker for them. Is it possible to show all markers no matter if they are of same location.

Help is much appreciated.

Thanks

I search through the forums and google but didn't find anything on this, but I was wondering if anyone was having or has had issues with google maps changing their lat/long coordinates, even when a frozen version is declared?

Code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script>

In the geocoding portion:
Code:

geocoder.geocode({'address': query}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
		var coordinates = results[0].geometry.location;
		point.latitude = coordinates['oa'];
		point.longitude = coordinates['pa'];
		return callback();
	} else {
		var error = new Object();
		error.message = 'We were unable to locate your latitude and longitude. Please check your address and try again.<br />';
		error.callback = function(){};
		return point.errorHandler(error);
	}
});

The coordinates variable keeps changing the key. Originally it was:
Code:

point.latitude = coordinates['xa'];
point.longitude = coordinates['ya'];

Then: (and several others)
Code:

point.latitude = coordinates['sa'];
point.longitude = coordinates['ta'];

Now:
Code:

point.latitude = coordinates['oa'];
point.longitude = coordinates['pa'];

Why if a frozen version is declared, is this still changing?

Hello,

I have the code below but for some reason it only works when adding the marker to the map (map click). When I drag the marker around, the coordinates and closest address don't update.

This code works if I add the marker straight in the initialize() function but not when I add it within the addListenerOnce for map click event.

I want to be able to add 1 marker to the map, and update its address and coordinates when dragging the marker around.

If someone can help me sort this out...
Thanks in advance!

Code:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var marker;

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('No matching address found.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
	
	var latLng = new google.maps.LatLng(45.397, 2.644);
	
	var map = new google.maps.Map(document.getElementById('mapCanvas'), {
		zoom: 8,
		center: latLng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
  
	google.maps.event.addListenerOnce(map, 'click', function(event) {
															
		var marker = new google.maps.Marker({
			position: event.latLng,
			title: 'Nouveau marqueur',
			map: map,
			draggable: true
		});
		
	  // Update current position info.
	  updateMarkerPosition(event.latLng);
	  geocodePosition(event.latLng);
  
	});

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });
  
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });
  
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <style>
  #mapCanvas {
    width: 500px;
    height: 400px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 10px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }
  </style>
  
  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>Marker status:</b>
    <div id="markerStatus"><i>Click and drag the marker.</i></div>
    <b>Current position:</b>
    <div id="info"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
  </div>
</body>
</html>

I've been trying for some time now to create some code which dynamically adds markers to a google map. I've now managed this but I still have a slight problem I think with the javascript side of things.

I've included a snippet of the code which shows 2 markers on the map. They should be 2 different markers but they are the same, and the contents of the popup bubble should be each individual postcode, but they both show the same postcode. Does anyone have any ideas?

Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Geocoding UK Postcodes with Google APIs Demo</title>

<style type="text/css">

html {
        height: 100%;
}

body {
        margin: 0;
        padding: 0;
        height: 100%;
}

#map {
        width: 100%;
        height: 100%;
        z-index:1;
}


</style>
        
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
        
<script type="text/javascript">
//<![CDATA[
	
	var icon2 = new GIcon();
	icon2.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
	icon2.shadow = "http://www.google.com/mapfiles/shadow50.png";
	icon2.iconSize = new GSize(32, 32);
	icon2.shadowSize = new GSize(37, 34);
	icon2.iconAnchor = new GPoint(16, 32);
	icon2.infoWindowAnchor = new GPoint(16, 0);
	
	var icon3 = new GIcon();
	icon3.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
	icon3.shadow = "http://www.google.com/mapfiles/shadow50.png";
	icon3.iconSize = new GSize(32, 32);
	icon3.shadowSize = new GSize(37, 34);
	icon3.iconAnchor = new GPoint(16, 32);
	icon3.infoWindowAnchor = new GPoint(16, 0);
	
	var localSearch = new GlocalSearch();

	function initialize() {
	
		if (GBrowserIsCompatible()) {
			map = new GMap(document.getElementById("map"));
			map.setCenter(new GLatLng(55.100651, -4.664941), 6);
		}
	
	}

	function createMarker(point2,html) {
        var marker2 = new GMarker(point2,icon2);
        GEvent.addListener(marker2, "click", function() {
                marker2.openInfoWindowHtml(html, {
                        noCloseOnClick: true
                        });
                });
        return marker2;
	}

	function createMarker2(point3,html) {
        var marker3 = new GMarker(point3,icon3);
        GEvent.addListener(marker3, "click", function() {
                marker3.openInfoWindowHtml(html, {
                        noCloseOnClick: true
                        });
                });
        return marker3;
	}

//]]>
</script>
    
</head>
<body>

<div id="map"><script type="text/javascript">document.write(initialize())</script></div> 
      
<script type="text/javascript">
		
		var thetext = 'LL58 8HU'
		
		localSearch.execute("LL58 8HU, UK");
		localSearch.setSearchCompleteCallback(null, 
			function() {
        		map.addOverlay(createMarker(new GLatLng(localSearch.results[0].lat,localSearch.results[0].lng),thetext));
			});	
	
</script>
    
<script type="text/javascript">
		
		var thetext2 = 'RG4 6UT'
		
		localSearch.execute("RG4 6UT, UK");
		localSearch.setSearchCompleteCallback(null, 
			function() {
        		map.addOverlay(createMarker2(new GLatLng(localSearch.results[0].lat,localSearch.results[0].lng),thetext2));
			});	
	
</script>
    
</body>
</html>

I'm trying to make a map that will show your current location, but also load an xml file to show certain attractions in your area.

I have the code to work for getting your current location, but I can't figure out how to implement loading the xml file and placing markers based off of that xml file.

Here is the code for getting my location:
Code:

function show_position(p)
{
	document.getElementById('current').innerHTML="latitude="+p.coords.latitude.toFixed(2)+" longitude="+p.coords.longitude.toFixed(2);
	var pos=new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
	map.setCenter(pos);
	map.setZoom(14);

	var infowindow = new google.maps.InfoWindow({
	    content: "<strong>yes</strong>"
	});

	var marker = new google.maps.Marker({
	    position: pos,
	    map: map,
	    title:"You are here"
	});

	google.maps.event.addListener(marker, 'click', function() {
	  infowindow.open(map,marker);
	});
	
}
</script >

Can anybody help me figure this out?

Thank you in advance

Hi:

I'm new to this forum and JS. I simply want to be able to use the Google Maps API v3 to allow a location value entered in my app (by the user) to show that location via Google maps.

The code below accomplishes this via an onClick event. How to accomplish the same WITHOUT an onClick? To be clear, it appears I need to be able to perform the geocode lookup to get the long/lat coordinates and then apply them. That all needs to occur on page load.

Any tips on how to re-arrange this code to accomplish the desire goal are appreciated. Thanks much.

Bill




Code:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

 var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { address: address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK && results.length) {
        // You should always check that a result was returned, as it is
        // possible to return an empty results object.
        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.set_center(results[0].geometry.location);
          var marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: map
          });
        }
      } else {
        alert("Geocode was unsuccessful due to: " + status);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
 <div id="map_canvas" style="width: 100%; height: 100%;"></div>
  <div>
    <input id="address" type="hidden" value="Chicago">
    <input type="button" value="Geocode It!" onClick="codeAddress()">
  </div>
</body>

Hey Guys,

I am currently building a web app that uses Google Maps V3 api.

You select a check box which then shows a marker on the map.

My issue is, when you select and the marker is placed, I need the map to focus to that point, it currently embeds but doesn't focus.

Is there a particular function I could use to achieve this?

My current code is shown below:

Code:

var locations = [
    // Longitude, Latitue, Content, Country Code, City Name
	[51.481383, -3.114967, holidayOverlay, 'UK', 'Cardiff'],
	[52.362393, 4.893379, holidayOverlay, 'NL', 'Amsterdam'],
	[48.852314, 2.350089, holidayOverlay, 'FR', 'Paris'],
	[40.18884, -3.716812, holidayOverlay, 'SP', 'Madrid'],
	[53.800651, -4.064941, holidayOverlay, 'IT', 'Rome'],
	[42.041134, 1.889648, holidayOverlay, 'SP', 'Costa Brava'],
	[36.79334, 27.234421, holidayOverlay, 'GR', 'Kos'],
	[37.014581, -7.933888, holidayOverlay, 'PT', 'Algarve'],
	[28.358776, -14.05426, holidayOverlay, 'PT', 'Fuerteventura'],
	[29.046854, -13.589973, holidayOverlay, 'SP', 'Lanzarote'],
];

// Only create marker when checked
for (i = 0; i < locations.length; i++) {
    if (locations[i][4] == location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
            map: map,
            icon: plotImage
        });
        var title = locations[i][4];
        var content = locations[i][2];
    }
}

I have left a lot of the code out to save you a headache.

Thanks.

Guy help me for the solution...

how to refresh the markers only every x...

below are my full scripts....
Code:

<?php
define('INCLUDE_CHECK',1);
include "dbconnect.php";
?>
<!DOCTYPE html>
<html lang="en">
    <head>
                <script type="text/javascript" src="host_entry/js/jquery-1.7.1.min.js"></script>

                <!-- Google Map JS -->
                <script src="http://maps.google.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" type="text/javascript"></script>

</head>
                        <div id="map_canvas" style="top:55px;left:13px;"> <!-- Map will display -->
                        <div id="map"> <!-- Fullscreen Loading & Fullscreen Buttons area -->
                        </div> 
                        <!-- Fullscreen Loading & Fullscreen Buttons area Ends -->
            </div><!-- Map Ends display -->
        
<script type="text/javascript">
/**function show_data()
{
        $('#map').load('index.php');
}
setInterval('show_data()', 60000);
**/

var locations = [
                <?php
                        $query="SELECT * from host_entry";
                        $result=mysql_query($query)or die(mysql_error());
{ 
                        
                                if ($num=mysql_numrows($result)) 
 {
                                        $i=0;

                                        while ($i < $num) 
        {
                                                $id=mysql_result($result,$i,"id");
                                                //$host_type=mysql_result($result,$i,"host_type");                                              
                                                $host_name=mysql_result($result,$i,"host_name");
                                                $host_server=mysql_result($result,$i,"host_server");
                                                $host_status=mysql_result($result,$i,"host_status");
                                                $host_lapt=mysql_result($result,$i,"host_lapt");
                                                $host_long=mysql_result($result,$i,"host_long");
                                                $host_circuit=mysql_result($result,$i,"host_circuit");
                                                $host_hotline=mysql_result($result,$i,"host_hotline");
                                                
        if($host_status==0) 
            echo "['<div class=container style=width:400px;><div class=page-header><h4>$host_name</h4></div>', $host_lapt, $host_long],";
                                                $i++;
                        
        }
 }else {
                        echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
       }
}
                ?>
];
    // Setup the different icons and shadows
    var iconURLPrefix = 'host_entry/img/'; 

    var icons = [  
          iconURLPrefix + 'p_red_alert.png'
    ]
        var icons_length = icons.length;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: -5,
          center: new google.maps.LatLng(3.1215681, 101.71180140000001),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      disableDefaultUI: true,
      panControl: false,
      zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });

    var marker;
    var markers = new Array();
    
    var iconCounter = 0;

    var infowindow = new google.maps.InfoWindow({
      maxWidth: 400,
          maxHeight: 350,
          
    });
                
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
        map: map,
                animation: google.maps.Animation.BOUNCE,
        icon : icons[iconCounter],
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent( 
                                                                locations[i][0]
                                                           );
          infowindow.open(map, marker);
                  
                setTimeout(function(){infowindow.close();}, '5000');
        }
      })(marker, i));
          
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= icons_length){
        iconCounter = 0;
      }
    }
         
    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();

  </script> 
    </body>
</html>

do i need to apply setInterval on the marker?
how to apply it on the marker so it refresh every X second...

please help for the solution....

Hi,

I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank.

This is the code for my called page with the instructions for the second map:
PHP Code:
<?php
echo $_POST['Map'] . '<br />';
?>

<div id="placemap_canvas"></div>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> 
    html {height:250px}
    body {height:250px}
    #placemap_canvas {width:100%; height:150px;}
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
        var latlng = new google.maps.LatLng (
<?php

include("dbconnect.php");

            $result = mysql_query("SELECT * FROM regions
            WHERE RegionPId='{$_POST['Map']}'");

            while($row = mysql_fetch_array($result)){
                echo $row['maplink'];
                }

        mysql_close($con);
?>
);
        var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("placemap_canvas"),
            myOptions);

    }

</script>

And this is the script of the main page, just in case I would be better off keeping them both in one place.
Code:

<head>

<script type="text/javascript">
function loadSubPlace(File,ID,Msg,Eile,EID,Esg){
loadXMLDoc1(File,ID,Msg);
	 var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000);
}
</script>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> 
	html {height:250px}
	body {height:250px}
	#map_canvas {width:30%; height:250px;}
</style>

<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
function initialize() {

		var latlng = new google.maps.LatLng (
<?php

include("dbconnect.php");

			$result = mysql_query("SELECT * FROM countries 
			WHERE Country='{$_SESSION['Country']}'");

			while($row = mysql_fetch_array($result)){
				echo $row['Map'];
				}

		mysql_close($con);
?>);
		var myOptions = {
			zoom: 4,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
			myOptions);
	}

</script>
</head>
<body onload="initialize()">

		<div class="countryright" id="map_canvas">

include("dbconnect.php");

$snowball=explode(';',$_POST['syringa']);
$turnsol=$snowball[1];
$violet =$snowball[2];
$wakerobin=$snowball[3];

global $turnsol;
global $violet;
global $wakerobin;

	echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />';

	$result=mysql_query("SELECT * FROM regions
	WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !=''
	ORDER BY sub ASC");

			while($row = mysql_fetch_array($result)){
				$wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}";
				$tigerlilly=$row['RegionPId'];
				echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />';
				}
		echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />';

echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />';

mysql_close($con);

?>

I've cut out the script that doesn't relate to this so I hope I haven't missed anything important.

I have some table rows with an item, item description and a text field named "qty" for the quantity. If a user types a number above 0 in the "qty" field, I would like it to highlight the table row. If a user gos back and deletes the number already in the text field I would like the table row to return to it's default state. How can I do this?

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.