JavaScript - Google Maps V3 Meets Javascript.. Help!

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?

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>

is there javascript i can use to keep certain tabs open on a flash drop down menu?

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.

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

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.

Hello

i have a problem i need to resolve here is the script
Code:

script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script> 
    <script type="text/javascript"> 
 
    var map = null;
    var geocoder = null;
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        geocoder = new GClientGeocoder();
      }
    }
 
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }
    </script> 
  </head> 
 
  <body onload="initialize()" onunload="GUnload()"> 
    <form action="#" onsubmit="showAddress(this.address.value); return false"> 
      <p> 
        <input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" /> 
        <input type="submit" value="Go!" /> 
      </p> 
      <div id="map_canvas" style="width: 500px; height: 300px"></div> 
    </form> 
  </body>

its all working well but i need to use it differently.

Is there a way to make the form submit automatically , i already have the address and i will <php> it from my database.

i want that the map will show in the page as soon as the user clicked on an ad(real estate ad).

Basically what we need here is:
To know how to call the functions and give the address from the database.

<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
<input type="submit" value="Go!" />
</p>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</form>
</body>

Is there a way just to use this command without the form onsubmit="showAddress(this.address.value); return false">?

And give the address as a variable ?

and when the page is uploading it will have already passed the address and the map will show

Danny

Hi guys, I am a new poster and new to google maps.

I have been working on geocoding and I have a problem, the example below works fine, all rollovers and icons work perfectly.

However, the info window will only display for one point. I am assuming I have this line of code in the wrong place.
new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});

Can anyone please help me? I would be so appriciative.


Code:

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

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var MarkersArray = [
  ['Oceans Eleven Casino', 33.199931,-117.368917, 4, '<div id="">Oceans Eleven Casino - text</div>', 'images/search.chips.small.png'],
  ['Pala Casino & Resort', 33.359418,-117.10583, 5, '<div id="content">Pala Casino & Resort - text</div>', 'images/search.chips.png'],
  ['Casino Pauma', 33.333271,-116.990626, 3, '<div id="content">Casino Pauma - text</div>', 'images/search.chips.small.png'],
  ['Lucky Lady Casino', 32.75844,-117.075513, 2, '<div id="content">Lucky Lady Casino - text</div>', 'images/search.chips.small.png'],
  ['Palomar Club', 32.75542,-117.13433, 1, 'Palomar Club - text', 'images/search.chips.png']
];


function setMarkers(map, locations) {
  // Add markers to the map
  for (var i = 0; i < locations.length; i++) {

    var MarkersArray = locations[i];
  // Marker sizes are expressed as a Size of X,Y
  var image = new google.maps.MarkerImage(MarkersArray[5],
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(60, 50),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 33));
  var shadow = new google.maps.MarkerImage(MarkersArray[5],
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(75, 60),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 33));
      // Shapes define the clickable region of the icon.
  var shape = {
      coord: [0,0,1,54,59,54,59,0],
      type: 'poly'
  };
	
    var infowindow = new google.maps.InfoWindow({content: MarkersArray[4]});
			
	
    var myLatLng = new google.maps.LatLng(MarkersArray[1], MarkersArray[2]);
    var marker = new google.maps.Marker({position: myLatLng,map: map,shadow: shadow,icon: image,shape: shape,title: MarkersArray[0],zIndex: MarkersArray[3]});
  }
  	new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
}



function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(32.75542,-117.13433),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  setMarkers(map, MarkersArray);
}
</script>

Hi,
I'm making a javascript with google maps API.
The concept is that you have to fill in your desired location and that it shows you the route to that location. It has an unchangeable starting location.
I also made it so that you have a description panel. Now when I try to make it so that the description panel is next to the map with the route on, my description panel just drops below my map. I believe this problem is either me f*cking up my div's or my CSS.

Here's what i used for my CSS
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#map_canvas {
height: 100%;
width: 70%
}

#directionsPanel {
float:right;
width:30%;
height 100%
}

@media print {
html, body {
height: auto;
}

#map_canvas {
height: 650px;
}
}
</style>

And here's what i used for my div's
<div id="main" style="width:100%;height:100%">
<div id="map_canvas" style="top:30px;width:70%;height:80%"></div>
<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</div>

Any help regarding this would be much appreciated. (And yes, I'm still new to scriptwriting/coding in general)

I have a google static map which I spent ages trying to work out what to put in it and now it will not work, or be valid, so I am doing something wrong? Can anyone help Have I set it out the right way, I know it is static but it is still JS I believe.

Code:

<p><img alt="google_static_map" src="http://maps.google.com/maps/api/staticmap?center=51.454863,0.011673&zoom=13&markers=United+Reformed+Church,+111+Burnt+Ash+Road,++Lee,+London+SE12+8RG,+UK&size=250x250&sensor=TRUE /></a></p>

DO I need to put in it a div? I cant do iframes. My editor does not like it at all and it is not showing on the website. I am using XHTML

Hello, I am working on creating a map using the google maps API. I would like to update the markers and info windows using an XML database. I know how to parse the XML using PHP if I was just going to create a table on the page, but for the life of me I can't find a complete and simple description of how to do it with javascript. I've been reading tutorials and W3 schools reference for over a week trying to figure it out. I'm new to javascipt, so some of the stuff I don't really understand. I did find a similar question posted on this forum, although I can't get it working. Here is my code (note: this code doesn't work, I know that I'm missing some way to load the xml and parse it, but I don't see how its done):
Code:

<!!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 80%; width: 80%; margin: 0px; padding: 0px }
  #map_canvas { height: 80% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(40.8068620, -96.6816790),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }
google.maps.event.addDomListener(window, 'load', initialize);

    var bounds = new GLatLngBounds();
	for (var i = 0; i < markers.length; i++) {
		var company = markers[i].getAttribute('company');
		var street = markers[i].getAttribute{'street');
		var city = markers[i].getAttribute{'city'}'
		var state = markers[i].getAttribute{'state');
		var zip = markers[i].getAttribute{'zip');
		var point = new GLatLng(parseFloat{markers[i].getAttribute{'lat')),
								parseFloat(markers[i].getAttribute('lng')));
								
		var marker = createMarker(point, company, street, city, state, zip,
		map.addOverlay(marker);
		

  function createMarker(point, company, street, city, state, zip) {
	var marker = new GMarker(point);
	var html;
	GEvent.addlistener(marker, 'click', function() {
	marker.openInfoWindowHtml(html);
	});
	return marker;
	}

</script>
</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>

The XML is set up like this:
Code:

<?xml version="1.0" encoding="UTF-8"?>
<rp>
<partner company="nameofcompany1" short="name1" street="123 fake street" city="New York" state="New York" zip="12345" lat="52.45545612" lng="-0.52664" />
<partner company="nameofcompany2" short=name2" street="231 notreal street" city="Chicago" state="IL" zip="23456" lat="55.45646" lng="-0.895423" />
</rp>

I'm not really concerned with geocoding using the code, the number of entries shouldn't be more than a couple dozen, and I won't be adding a bunch at a single time. I was able to get the map working how I would like it, with multiple infowindows and markers, but I was having to put each into the code manually, with unique variables for each marker and info window. It seems like there is a much cleaner way to do this.

If anyone can help me, it would be much appreciated.