JavaScript - Google Maps Api Geocode And Update Marker Position

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>

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.

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>

Hi guys,

Hopefully a really quick question. I'm a JS novice, and am looking for a way to output the coordinates of a Google maps marker into the value of two text fields, one for latitude and one for longitude.

The code below is a simple location search which returns a result with a draggable marker. Currently, the coordinates in both text fields update when the location search is performed, but not when the marker is dragged to a new location afterwards.

Does anyone know the code to simply update the coordinates each time the marker is dropped on a new location?

Code:

<html>
<head>
<style type="text/css">
#map_canvas {
width:444px;
height:444px;
overflow:hidden;
}
</style>
      <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA-Kl-tQOj5PlnOlXQmp2N9hTg6Fn61x9hOlvMvn6kV4ENK8yRfBShRuj-nulocuk2Alx9JmFKKV4zwA" type="text/javascript"></script>
      <script type="text/javascript"> 
 
    var map;
    var geocoder;
 
    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(52.8068752, -1.6430344),6);
			map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
		map.enableScrollWheelZoom();
      geocoder = new GClientGeocoder();
	    // Update current position info
    }
 
    // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Whoops, we couldn't find that address!");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point,{draggable:true});
        map.addOverlay(marker);
		



		
		
        marker.openInfoWindowHtml(place.address + '<br /><span class="smallgrey">Zoom in and drag the marker to exactly where the point is</span>');
      
		document.getElementById("latitude").value = point.lat();
		document.getElementById("longitude").value = point.lng();



}
	  
    }
 
    // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
      var address = document.forms[0].q.value;
      geocoder.getLocations(address, addAddressToMap);
    }
 
   // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
      document.forms[0].q.value = address;
      showLocation();
    }
	



    </script>
</head>

  <body onload="initialize()"> 


<form action="#" onsubmit="showLocation(); return false;"><input type="text" name="q"  size="35" /> <input type="submit" name="find" value="Search"/></form> 
<div id="map_canvas">And pin the <strike>tail</strike> marker on the <strike>donkey</strike> map:<br /></div> 

Latitude: <input class="required" type="text" name="latitude" id="latitude" value="53.34870686020199" /> <br />
Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-6.267356872558594" />


</body>
</html>

Many thanks in advance, I appreciate anyone who wants to help out!

Hey everyone!
I have been fiddling with this for a while now. I cant seem to make anything work. I have tried geocoding services, get position etc. I am sure it can be done so I was hoping someone here may have some experience with the newest API for google maps, V3.

In my code below I just have a simple map with a marker.. not important. What I am trying to do is, when you drag the little man to switch the map into streetview, I need to display the current latitude and longitude in some input boxes. This needs to happen in streetview mode though which I have not been able to make happen.

Anyone care to lend a few minutes? It must be possible!

Code:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title></title>
<style>
#map_canvas {height: 500px; width:800px;}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true
    });
	
var markers = [
	
{ lat: 49.202612, lng: -122.879612, name: 'McDonalds', marker: 'default' }];

// Create the markers
for (index in markers) addMarker(markers[index]);
   function addMarker(data) {
   var marker = new google.maps.Marker({
   position: new google.maps.LatLng(data.lat, data.lng),
   map: map,
   title: data.name
   });
   }


   var bounds = new google.maps.LatLngBounds();
   for (index in markers) {
   var data = markers[index];
   bounds.extend(new google.maps.LatLng(data.lat, data.lng));
   }
   map.fitBounds(bounds);
}
</script> 
</head>

<body onload="initialize()"> 
	
<div id="map_canvas"></div>

Streetview Latitude: <input type="text" name="latitude" value="?"><br>
Streetview Longitude: <input type="text" name="longitude" value="?">

</body>
</html>

My first google map, using latlng coordinates works fine. However my second google map isn't working. The map itself is grey. I have my code, but the problem is I am not calling the geocode function and I am not sure where I should do this.

Code:

<script type="text/javascript">
	var geocoder;
	var submap;

function createGMapFromAddress(position){ 
alert(position);

	geocoder = new google.maps.Geocoder();
	var sublatlng = new google.maps.LatLng(position);
	var  map_options = { 
        	zoom: 4, 
		center: sublatlng,
        	mapTypeId: google.maps.MapTypeId.ROADMAP 
    	}       
    	var submap = new google.maps.Map(document.getElementById("placemap_canvas"), map_options); 
    	}  

function codeAddress(address){
alert("address");
	var address = document.getElementById("address").value;
	geocoder.geocode({address: address}, function(results, status){
		if (status == google.maps.GeocoderStatus.OK && results.length){
			if (status != google.maps.GeocoderStatus.ZERO_RESULTS){
          map.set_center(results[0].geometry.location);

        }
      } else {
        alert("Geocode was unsuccessful due to: " + status);
      }
    });

  }

</script>

The script is called by clicking on a button:
Code:

<input type="button" value="Click" onclick="createGMapFromAddress('Oxford Street,London,UK')"; />

Hi,

When I try and geocode an addres to my google map I receive the error:

Object does not support this method or property

I have gone over the script and can't work out what I did wrong.

Code:

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

<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
	var geocoder;
	var map;

function createGMapFromAddress(){ 

	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(0,0);
	var  map_options = { 
        	zoom: 4, 
		center: latlng,
        	mapTypeId: google.maps.MapTypeId.ROADMAP 
    	}       
    	map = new google.maps.Map(document.getElementById("bookmark_map"), map_options); 
    	}  

function loadBookMarkMap(location){
alert(location);
	var address = location;
alert(address);
	geocoder.geocode({address: address}, function(results, status){
		if (status == google.maps.GeocoderStatus.OK && results.length){
			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);
      }
    });

alert(marker);
  }

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

//php get from table
				 $possumshaw ="{$row['address']}";				}
				echo '<input type="button" class="button4" value="View Map" onclick="loadBookMarkMap(\'' . $possumshaw  . '\')" />';

?>

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 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

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'm new to javascript and am not sure why this works in firefox and not chrome.
I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically.

if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome

Code:

<script type="text/javascript" >
	
	
window.onscroll = function() 
{
	if( window.XMLHttpRequest ) { 
		
			
			var x = 0 -document.documentElement.scrollTop;
			var toP = String(x);
			var toPP = toP + "px";
			
			document.getElementById('fire').style.position = 'fixed'; 
			document.getElementById('fire').style.top = toPP;
				
	}
}
	</script>

Hey

I'm quite new at javascript and am currently in the process of creating a site that embeds google maps using an xml document.

What I'm trying to do is categories the markers on my map.

I am trying to make it so there are check boxes at the bottom and when i check the boxes, i.e. theatres, the markers will appear for the theatres and disappear when unchecked.

Using some example code i have modified, i have so far got the maps to pickup the markers from the xml with the check boxes but the markers are all just on the page and the check boxes dont do anything and I am stuck as to of why.

here's my code:

Code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Google Maps</title>
    <script src="mykey"></script>
  </head>
 <body style="margin:0px; padding:0px;" onload="initialize()"> 
  
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 550px; height: 450px"></div>
        </td>
        <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div>

        </td>
      </tr>
    </table>
    <form action="#">
      Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> &nbsp;&nbsp;
      Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> &nbsp;&nbsp;
      Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />

    </form>  

<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
  </body>


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

    if (GBrowserIsCompatible()) {

      var side_bar_html = "";
    
     
      var gmarkers = [];
	  var map = null;

      
      function createMarker(point,name,html,category) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
      
		marker.mycategory = category;                                 
        marker.myname = name;
        gmarkers.push(marker);
        
        side_bar_html += '<a href="javascript<b></b>:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
        return marker;
      }

     
 function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }
     
        document.getElementById(category+"box").checked = true;
      }

   ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }
    
        document.getElementById(category+"box").checked = false;
    that we just hid
        infowindow.close();
      }


      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
    
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

     
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 53.8363,-3.03771), 11);
	  
      GDownloadUrl("categories.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 google.maps.LatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var name = markers[i].getAttribute("name");
          var html = "<b>"+name+"<\/b><p>"+address;
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
          map.addOverlay(marker);
        }

        document.getElementById("side_bar").innerHTML = side_bar_html;
	
        show("theatre");
        hide("golf");
        hide("info");
      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }


    </script>
  </body>

</html>

If anybody help with this and tell me where I am going wrong, it would be much appreciated.


thanks

I'm completely at a loss how to embed a map with the new google maps api setup. I found a snippet of code that I dropped in with some small database variables pulled in and was done. Then an error came that the API was no good. So I went in and set up an anaccount, got an api and now I just simply have no clue what their instructions are saying I need to do. Gah!

Here's what I originally had:
I now have a Client ID, client secret and stuff. But no clue how to set up this url, etc.
Code:

</script> 
<script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI"
            type="text/javascript"></script>
            
<script type="text/javascript">
    
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>), 13);
 // Add the latitude/longitude marker to the map
	var point = new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>);
	map.addOverlay(new GMarker(point));
	map.setUIToDefault();
      }
    }

    </script>

<b>Map:<br><br><div id="map_canvas" style="width: 500px; height: 300px; z-index:4000;border-width:medium;border-color:#030;"></div></b>

Hey all

I'm quite a newbie at javascript and I'm trying to have links to google maps markers.
I have a page with my embeded google maps on it and some markers.

What I'm basically looking to do is have a web page with a menu down the side and when you click the menu items, the google maps markers would pop up on the map.

For example, city attractions down a side menu and when you click say restaurants, the markers would pop up the location restaurants in a certain place, then you could click pubs and the restaurant markers would dissapear and the pub markers would appear.

Can anyboy help me with this or even direct me to some code that would help.

Thanks all.