JavaScript - Zoom To Fit All Markers On Google Maps Api V3

Firstly I know this is a PHP issue yet it is within javascript and IMO is the root cause of the problem.

I'm trying to output markers from a search query of locations from my database, onto a Google Map (api v.3) using a tut I found http://tips4php.net/2010/10/use-php-...g-data-on-map/

When adding this to my page I'm getting Undefined index:errors.

I have changed the variables in the php part of the script to suit my database yet have left everything else alone, cant figure out why I'm still getting a blank map????

Please help....

My code with errors being shown at bottom;

Code:

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript"> 
 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
 new google.maps.Size(32, 32), new google.maps.Point(0, 0),
 new google.maps.Point(16, 32));
 var center = null;
 var map = null;
 var currentPopup;
 var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng, info) {
 var pt = new google.maps.LatLng(lat, lng);
 bounds.extend(pt);
 var marker = new google.maps.Marker({
 position: pt,
 icon: icon,
 map: map
 });
 var popup = new google.maps.InfoWindow({
 content: info,
 maxWidth: 300
 });
 google.maps.event.addListener(marker, "click", function() {
 if (currentPopup != null) {
 currentPopup.close();
 currentPopup = null;
 }
 popup.open(map, marker);
 currentPopup = popup;
 });
 google.maps.event.addListener(popup, "closeclick", function() {
 map.panTo(center);
 currentPopup = null;
 });
 }
 function initMap() {
 map = new google.maps.Map(document.getElementById("map"), {
 center: new google.maps.LatLng(0, 0),
 zoom: 14,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: false,
 mapTypeControlOptions: {
 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
 },
 navigationControl: true,
 navigationControlOptions: {
 style: google.maps.NavigationControlStyle.SMALL
 }
 });
 <br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.994709, ,'<b></b><br/>');
<br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.985416, ,'<b></b><br/>');
<br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(53.985416, ,'<b></b><br/>');
<br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(0.000000, ,'<b></b><br/>');
<br />
<b>Notice</b>:  Undefined index:  name in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>73</b><br />
<br />
<b>Notice</b>:  Undefined index:  lng in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>75</b><br />
<br />
<b>Notice</b>:  Undefined index:  info in <b>D:\www\ofcftp\familysupport-results.php</b> on line <b>76</b><br />
addMarker(0.000000, ,'<b></b><br/>');
 center = bounds.getCenter();
 map.fitBounds(bounds);

 }
 </script>

Hi guys, so far any values recorded in my database are shown on the map:

http://www.vfrflight.co.uk/new2/phpsqlajax_map_v3.html

Code:

<!DOCTYPE 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>PHP/MySQL & Google Maps Example</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></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(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        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 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, request.status);
        }
      };

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

    function doNothing() {}

    //]]>

  </script>

  </head>

  <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>

</html>

However, how do i let people place markers when a button is pressed. I believe this is the code to place markers when left click occurs:

Code:

<!DOCTYPE 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>Google Maps JavaScript API v3 Example: Map Simple</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var marker;
    var infowindow;

    function initialize() {
      var latlng = new google.maps.LatLng(37.4419, -122.1419);
      var options = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      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 saveData() {
      var name = escape(document.getElementById("name").value);
      var address = escape(document.getElementById("address").value);
      var type = document.getElementById("type").value;
      var latlng = marker.getPosition();
 
      var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
                "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
      downloadUrl(url, function(data, responseCode) {
        if (responseCode == 200 && data.length <= 1) {
          infowindow.close();
          document.getElementById("message").innerHTML = "Location added.";
        }
      });
    }

    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 doNothing() {}
    </script>
  </head>

  <body style="margin:0px; padding:0px;" onload="initialize()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div id="message"></div>
  </body>

</html>

Help would be appreicated very much! I cannot combine the codes to save my life...

I pulled this code from Google's example section to make markers on a v3 Google Maps API (I have added my own lat/long points and corresponding event listeners, of course, but this is still the spirit of the code): Code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  function initialize() {
    var map_center = new google.maps.LatLng(39.2,-84.479381);
     var store1 = new google.maps.LatLng(39.112456,-84.574779);
    var store2 = new google.maps.LatLng(39.314153,-84.261379);
    var store3 = new google.maps.LatLng(39.197099,-84.667579);
    var store4 = new google.maps.LatLng(39.16836,-84.479381); 
    var myOptions = {
      zoom: 10,
      center: map_center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     var marker1 = new google.maps.Marker({
        position: store1, 
        map: map, 
        title:"Store 1"
    });
    var marker2 = new google.maps.Marker({
        position: store2, 
        map: map, 
        title:"Store 2"
    });
    var marker3 = new google.maps.Marker({
        position: store3, 
        map: map, 
        title:"Store 3"
    });
    var marker4 = new google.maps.Marker({
        position: store4, 
        map: map, 
        title:"Store 4"
    }); 
    google.maps.event.addListener(marker1, 'click', function() {
      map.set_center(store1);
      map.set_zoom(16);
    });
    google.maps.event.addListener(marker2, 'click', function() {
      map.set_center(store2);
      map.set_zoom(16);
    });
    google.maps.event.addListener(marker3, 'click', function() {
      map.set_center(store3);
      map.set_zoom(16);
    });
    google.maps.event.addListener(marker4, 'click', function() {
      map.set_center(store4);
      map.set_zoom(16);
    });
  }
</script>

This works without fail, but when I try to use a javascript array to hold my values and loop my way through the marker creation like so: Code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  function initialize() {
    var map_center = new google.maps.LatLng(39.2,-84.479381);
    var store_locations = new Array();
    var temporary_stuff = new Array();
    store_locations[0] = "39.112456,-84.574779";
    store_locations[1] = "39.314153,-84.261379";
    store_locations[2] = "39.197099,-84.667579";
    store_locations[3] = "39.16836,-84.479381";
    var myOptions = {
      zoom: 10,
      center: map_center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     for(i=0;i<store_locations.length;i++){
        var marker_string = "position: "+new google.maps.LatLng(store_locations[i])+", map: map, title:\"Store "+(i+1)+"\";";
        temporary_stuff[i] = new google.maps.Marker(marker_string);
    } 
    var markers = new Array();
     for(i=0;i<temporary_stuff.length;i++){
        var the_marker = "position: temporary_stuff[" + i + "], map: map, title:\"Store " + (i+1) + "\";";
        markers[i]= new google.maps.Marker(the_marker);
    } 
  }
</script>

I get a blank map. Here's a link to the test file:
http://rowsdower.freehostia.com/map_test.php

It's not throwing up any errors in Firefox's developer or in IE but there it sits, a blank map.

I'm sure this isn't clean or optimized code, but it looks correct to me. I've color-coded the code above to show what "for" loops are being used to try to replace which code. Hopefully that makes this more sensible.

I haven't even tried to add the listeners yet since I can't get the markers to appear. Can anyone tell me why this isn't working or point me in a more productive direction?

Is there a better way already out there that I haven't noticed?

I'm trying to show an array of markers which, when clicked, will show an infowindow and also a circle with a radius, the size of which is also part of the array.

I've got as far as showing the markers, the infoboxes and the circles, but am struggling with toggling the circles.

I haven't quite made up my mind if I want the circles to all be initially on or off, I guess that depends how many I end up with...

Here's what I have so far: -

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps API Tests</title>
<style type="text/css">
html {font-family:Tahoma,verdana,sans-serif; font-size:0.75em;}
p {font-weight:bold;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
  function initialize() {

	var myLatlng = new google.maps.LatLng(36.637484, -121.51057);
	var myOptions = {
	  zoom: 6,
	  center: myLatlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  streetViewControl: true
	}

	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	setMarkers(map, sites);
	infowindow = new google.maps.InfoWindow({
			content: "loading..."
		});

  }


	var sites = [
		['Google', 37.422117, -122.083856, 'http://www.google.com/', 402336],
		['Yahoo', 34.030194, -118.47479, 'http://www.yahoo.com/', 201168]
	];



	function setMarkers(map, markers) {

		for (var i = 0; i < markers.length; i++) {
			var sites = markers[i];
			var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
			var marker = new google.maps.Marker({
				position: siteLatLng,
				map: map,
				title: sites[0],
				html: '<p>'+sites[0]+'</p><a href="'+sites[3]+'">Web Link</a>'
			});

			var circle = new google.maps.Circle({
				map: map,
				radius: sites[4],
				fillColor: '#12a3eb',
				fillOpacity: 0.15,
				strokeColor: '#0177b3'
			});

			circle.bindTo('center', marker, 'position'); 


			google.maps.event.addListener(marker, "click", function () {
				infowindow.setContent(this.html);
				infowindow.open(map, this);
			});
		}
	}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Any help would be much appreciated!

For my Javascript class, we are to take a code from the book and add on to it. In this code, I decided to add custom markers and info windows for each location. I got the info windows to work but they are the same for each marker. How can I fix this? Here is what I have:

Code:

<script>
function init() {
	var myLatLng = new google.maps.LatLng(36.795209, -3.339844);	
	var myOptions = {
	   zoom: 2,
	   center: myLatLng 
    };
	var map = new google.maps.Map(document.getElementById("map"), myOptions);
	
	//This is Location 1	
	var image = 'image1.jpg';
	var canyon= new google.maps.Marker({
	position: new google.maps.LatLng(35.9766,-113.7717),
	map: map,
	title:"Grand Canyon, USA"});
	
	var infoWindow = new google.maps.InfoWindow({
	content: "Grand Canyon, USA"});
	google.maps.event.addListener(canyon, 'click', function(){
	infoWindow.open(map, canyon); });
	
	//This is Location 2
	var image = 'image2.jpg';
	var paricutin= new google.maps.Marker({
	position: new google.maps.LatLng(19.5948,-102.4331),
	map: map,
	title:"Paricutin, Mexico"});	
	
	var infoWindow = new google.maps.InfoWindow({
	content: "Paricutin, Mexico"});
	google.maps.event.addListener(paricutin, 'click', function(){
	infoWindow.open(map, paricutin); });

	//This is Location 3
	var image = 'image3.jpg';
	var victoria= new google.maps.Marker({
	position: new google.maps.LatLng(-17.928,25.826),
	map: map,
	title:"Victoria Falls, Zimbabwe"});

	var infoWindow = new google.maps.InfoWindow({
	content: "Victoria Falls, Zimbabwe"});
	google.maps.event.addListener(victoria, 'click', function(){
	infoWindow.open(map, victoria); });

	//This is Location 4
	var image = 'image4.jpg';
	var reef= new google.maps.Marker({
	position: new google.maps.LatLng(-17.98,146.76),
	map: map,
	title:"Great Barrier Reef, Austrailia"});
	
	var infoWindow = new google.maps.InfoWindow({
	content: "Great Barrier Reef, Austrailia"});
	google.maps.event.addListener(reef, 'click', function(){
	infoWindow.open(map, reef); });

	//This is Location 5
	var image = 'image5.jpg';
	var harbor= new google.maps.Marker({
	position: new google.maps.LatLng(-22.8424,-43.1502),
	map: map,
	title:"Harbor Rio De Janerio, Brazil"});
	
	var infoWindow = new google.maps.InfoWindow({
	content: "Harbor Rio De Janerio, Brazil"});
	google.maps.event.addListener(harbor, 'click', function(){
	infoWindow.open(map, harbor); });

	//This is Location 6
	var image = 'image6.jpg';
	var everest= new google.maps.Marker({
	position: new google.maps.LatLng(27.98783,86.92476),
	map: map,
	title:"Mount Everest Peak, Nepal"});
	
	var infoWindow = new google.maps.InfoWindow({
	content: "Mount Everest Peak, Nepal"});
	google.maps.event.addListener(everest, 'click', function(){
	infoWindow.open(map, everest); });	
	}
google.maps.event.addDomListener(window, 'load', init);
</script>

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 am completely new to javascript programming. We had another company (out of business now) develop a mapping system that placed many different business locations on a Google map. However, the points overlap and hide each other. I would like the user to have to single click on the map (thus zooming the map in) before they can choose a business.

Is there a simple line of code that will do this? I want to remove the need to double click to zoom and make it a single click to zoom prior to selecting a business.

If you want to see the mapping code, I can post it. I wasn't sure what to do.

This is a fairly pressing matter as the nonprofit I am helping out is seasonal and ready to start the busy season soon.

THANKS!

Hi

I have just started looking at the Google maps, and have atutorial that will get the co-ordinates. What I want this to do, is then populate two fields on a form one called longitude and one called latitude

Code:

function usePointFromPostcode(postcode, callbackFunction) {
  
  localSearch.setSearchCompleteCallback(null, 
    function() {
      
      if (localSearch.results[0]) {    
        var resultLat = localSearch.results[0].lat;
        var resultLng = localSearch.results[0].lng;
        var point = new GLatLng(resultLat,resultLng);
        callbackFunction(point);
      }else{
        alert("Postcode not found!");
      }
    });  
    
  localSearch.execute(postcode + ", UK");
}

Any ideas/tips would be be much appreciated

I am using jMapping(http://vigetlabs.github.com/jmapping/) for using jQuery with google maps. What I'm trying to do is add an event listener so that when you click on a marker it will call a function I made within the jMapping function. Does anyone have any clues? everything I've tried doesn't work.

I have some problems with intergrating google maps into my page

I cant seem to get a marker to appear on my map. I have tried numerous methods but non seem to work.

I have integrated the google maps on my main site, repositioned and re-sized.

The code below is a test page i work on to get code to work. It's just a map on a page

entire code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 25px; padding: 25px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrxZnpYBNIwzBFVYaDY__BMONEjNEGZaI&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});

</script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

can anybody tell my where i am going wrong and just the map appears with no marker?


thanks

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.

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>

Hi,

Not sure how difficult this will be but im working on a javascript/HTML5 game, and thought it would be interesting to allow for people to add their score to a google map at their location.

I can get the google map and allow people to add their own markers but i dont no how i would store them, and then reload them when someone plays the game.

any ideas?

Thanks, Luke

Hello!

I'm developing a small application with Google Maps API for use in Wordpress and didn't want to place all the javascript into the Worpress page template file. But whenever I place the javascript that works fine in page tempalte into separate javascript file in Wordpress, all of the code using Google Maps API except the code that runs Maps itself stops working. So the Maps runs but for example Geocoder does not.
I'm simulatenously using Google's jQuery API. I hope someone has experience with this and can help me.