JavaScript - Google Maps, Multiple Custom Markers

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

hi, I would like to show a custom icon for my google maps
I have created a .PNG image and uploaded it but doesn't seem to be showing?!
Please help!
Code:

<script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(51.491260580148, 0.081139742462267), 16);
        var point = new GLatLng(51.491260580148, 0.081139742462267);
        map.setCenter(point, 16);
        //var marker = new GMarker(point);
        map.addOverlay(marker);
        var marker = new GIcon();
      marker.image = "images/helix.png";
      marker.iconSize = new GSize(40, 40);
      marker.shadow = "myshadow.png";
      marker.shadowSize = new GSize(36, 34);
      marker.iconAnchor = new GPoint(5, 34);
      marker.infoWindowAnchor = new GPoint(5, 2);
      marker.transparent = "mytran.png";
      marker.printImage = "mymarkerie.gif";
      marker.mozPrintImage = "mymarkerff.gif";
      marker.printShadow = "myshadow.gif";
      marker.imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,
       19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,
       16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];
      }
    }
    //]]>
    </script>

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

here is my code:

Code:

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

    if (GBrowserIsCompatible()) {

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

        });
        return marker;
      }

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

      // Set up three markers with info windows

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

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

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

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

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

    }

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

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

    //]]>
    </script>

Hi coding world!

I am having some serious issues with getting multiple sets of coordinates to appear on google maps on my website.

I have many items stored in a database, and each row has a field for latitude and a field for longitude. I get the data like this:

PHP Code:
$getdeals = "SELECT * FROM deals WHERE cityid='$cityid'";
$result = mysql_query($getdeals);

while($row = mysql_fetch_array($result)){
    $title = $row['title'];
    $lat = $row['lat'];
    $lng = $row['lng'];
        //THIS IS WHERE I THINK I WOULD TRY TO ADD THE POINT TO THE MAP
} 


If anybody could steer me in the right direction that would be amazing!! Thanks!

Hello,
I am trying to create multiple google maps with multiple directions that load on one page. I have tried duplicating the var and function names but I haven't been able to get it to work.

Does anyone have any ideas?

Any help or suggestions would be greatly appreciated!

-Topianno

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Advanced Directions</title>
    <script src=" http://maps.google.com/?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
      type="text/javascript"></script>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, sans serif;
        font-size: 11px;
        margin: 2px;
      }
      table.directions th {
    background-color:#EEEEEE;
      }
      
      img {
        color: #000000;
      }
    </style>
    <script type="text/javascript">
 
    var map;
    var map2;
    var gdir;
    var gdir2;
    var geocoder = null;
    var geocoder2 = null;
    var addressMarker;
    var addressMarker2;


    function initialize() {
      if (GBrowserIsCompatible()) {      
        map = new GMap2(document.getElementById("map_canvas"));
        gdir = new GDirections(map, document.getElementById("directions"));
        GEvent.addListener(gdir, "load", onGDirectionsLoad);
        GEvent.addListener(gdir, "error", handleErrors);

        setDirections("San Francisco", "Mountain View", "en_US");
         setDirections2("San Francisco", "Mountain View", "en_US");
      }
    }
    
    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress,
                { "locale": locale });
                
                
    }

    function handleErrors(){
       if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
         alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
       else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
         alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
       
       else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
         alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

    //   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
    //     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);
         
       else if (gdir.getStatus().code == G_GEO_BAD_KEY)
         alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

       else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
         alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
        
       else alert("An unknown error occurred.");
       
    }

    function onGDirectionsLoad(){ 
      // Use this function to access information about the latest load()
      // results.

      // e.g.
      // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
      // and yada yada yada...
    }
    </script>

  </head>
  <body onload="initialize()" onunload="GUnload()">
  
  <h2>Maps API Directions Illustrated</h2>
  <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">

  <table>

   <tr><th align="right">From:&nbsp;</th>

   <td><input type="text" size="25" id="fromAddress" name="from"
     value="San Francisco"/></td>
   <th align="right">&nbsp;&nbsp;To:&nbsp;</th>
   <td align="right"><input type="text" size="25" id="toAddress" name="to"
     value="Mountain View" /></td></tr>

   <tr><th>Language:&nbsp;</th>
   <td colspan="3"><select id="locale" name="locale">

    <option value="en" selected>English</option>

    <option value="fr">French</option>

    <option value="de">German</option>
    <option value="ja">Japanese</option>
    <option value="es">Spanish</option>
    </select>

    <input name="submit" type="submit" value="Get Directions!" />

   </td></tr>
   </table>

    
  </form>

    <br/>
    <table class="directions">
    <tr><th>Formatted Directions</th><th>Map</th></tr>

    <tr>
    <td valign="top"><div id="directions" style="width: 275px"></div></td>
    <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>

    </tr>
    </table> 
    
    
     <h2>Maps API Directions Illustrated 2nd Map</h2>
  <form action="#" onsubmit="setDirections2(this.from.value, this.to.value, this.locale.value); return false">

  <table>

   <tr><th align="right">From:&nbsp;</th>

   <td><input type="text" size="25" id="fromAddress2" name="from"
     value="San Francisco"/></td>
   <th align="right">&nbsp;&nbsp;To:&nbsp;</th>
   <td align="right"><input type="text" size="25" id="toAddress2" name="to"
     value="Mountain View" /></td></tr>

   <tr><th>Language:&nbsp;</th>
   <td colspan="3"><select id="locale" name="locale2">

    <option value="en" selected>English</option>

    <option value="fr">French</option>

    <option value="de">German</option>
    <option value="ja">Japanese</option>
    <option value="es">Spanish</option>
    </select>

    <input name="submit" type="submit" value="Get Directions!" />

   </td></tr>
   </table>

    
  </form>

    <br/>
    <table class="directions">
    <tr><th>Formatted Directions</th><th>Map</th></tr>

    <tr>
    <td valign="top"><div id="directions" style="width: 275px"></div></td>
    <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>

    </tr>
    </table> 
    
  </body>
</html>

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!

I am having trouble implementing this script.

I am not a coder so please give exact, idiot proof advise. :-)

Thank You.

<script>
(function() {
var cx = 'user_id:field_id1';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);

// This basically takes the value of the radio button (requires jQuery)
$("input:radio[name='GCSField']").change(function() {
cx = $(this).val();
});

})();
</script>
<label for="user1">
<input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label>
<label for="user2">
<input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label>

<gcse:search></gcse:search>

Here is my html.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320">
<style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style>
</head><body>
<article>
<div><script>
(function() {
var cx = 'user_id:field_id1';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);

// This basically takes the value of the radio button (requires jQuery)
$("input:radio[name='GCSField']").change(function() {
cx = $(this).val();
});

})();
</script>
<label for="user1">
<input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label>
<label for="user2">
<input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label>
<gcse:search></gcse:search></div>
<div><gcse:searchresults></gcse:searchresults></div>
</article>
</body></html>

Here is the above page off a server TEST

Thanks again.

I am no javascript coder so apologies for what may be a simple issue,

I have a php page that pulls MySQL marker locations

I have tried using examples for bounds etc but the map isn't centered or zoomed, it instead seems to center over the Pacific and minimum zoom level (For the url below it should be centered over the Devon region of the UK and zoomed in)

the page where you can see the end result is he
http://www.peugeotcentral.co.uk/modu...tches&Region=1

I did have some issues in my code whereby I was using deprecated function of GPoint for passing locations but one of the group mods kindly pointed this out and this was replaced with GLatLng but the fault is still there

any help much appreciated, I do have the source code for the php if required

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

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

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.

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.