JavaScript - I Need Help With Bing Maps Api Code

How do Google and Bing allow you to use the keyboard up and down keys to jump to the suggested search results. I know how to do the Ajax search part, I just can't figure out how to get the search suggestions selected, and fire their HREF tag upon clicking the Enter button. Basically I can do all this without any keyboard navigation but I need to hook in the keyboard like they do.

Is there a simple example somewhere? Google and Bing's are super complex and I can't snoop how they pull it off.

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

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.

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

Hello,

I'm just beginning to work with javascript and having a heck of a time with the syntax. I've worked with PC's for over 25 years, but my programming skills are weak and rusty.

I have a jpg image(s) that I'm trying to get to "overlay" a Google base map and I know I'm so close, but can't figure it out. I've looked at plenty of sample code on Google's code pages, as well as others but I'm missing something.

I can send the code if someone could please help.

Thanks in advance!

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

I have a working script and I want to add a toogleGroup command (which I have) to the end of the working script so that I can toggle map markers with radio buttons. Probably a simple addition.

WORKING CODE:
Code:

    //<![CDATA[  
    var iconPink = new GIcon(); 
    iconPink.image = 'http://www.golfinggreys.com/img/ggmap_icon_attraction.png';
    iconPink.shadow = '';
    iconPink.iconSize = new GSize(24, 31);
    iconPink.shadowSize = new GSize(0, 0);
    iconPink.iconAnchor = new GPoint(11, 30);
    iconPink.infoWindowAnchor = new GPoint(5, 1);

    var iconOrange = new GIcon(); 
    iconOrange.image = 'http://www.golfinggreys.com/img/ggmap_icon_accomm.png';
    iconOrange.shadow = '';
    iconOrange.iconSize = new GSize(24, 31);
    iconOrange.shadowSize = new GSize(0, 0);
    iconOrange.iconAnchor = new GPoint(11, 30);
    iconOrange.infoWindowAnchor = new GPoint(5, 1);

    var iconPurple = new GIcon(); 
    iconPurple.image = 'http://www.golfinggreys.com/img/ggmap_icon_dining.png';
    iconPurple.shadow = '';
    iconPurple.iconSize = new GSize(24, 31);
    iconPurple.shadowSize = new GSize(0, 0);
    iconPurple.iconAnchor = new GPoint(11, 30);
    iconPurple.infoWindowAnchor = new GPoint(5, 1);

    var iconGreen = new GIcon(); 
    iconGreen.image = 'http://www.golfinggreys.com/img/ggmap_icon_golf.png';
    iconGreen.shadow = '';
    iconGreen.iconSize = new GSize(24, 31);
    iconGreen.shadowSize = new GSize(0, 0);
    iconGreen.iconAnchor = new GPoint(11, 30);
    iconGreen.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://www.golfinggreys.com/img/ggmap_icon_golfr.png';
    iconRed.shadow = '';
    iconRed.iconSize = new GSize(24, 31);
    iconRed.shadowSize = new GSize(0, 0);
    iconRed.iconAnchor = new GPoint(11, 30);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var iconGrey = new GIcon(); 
    iconGrey.image = 'http://www.golfinggreys.com/img/ggmap_icon_services.png';
    iconGrey.shadow = '';
    iconGrey.iconSize = new GSize(24, 31);
    iconGrey.shadowSize = new GSize(0, 0);
    iconGrey.iconAnchor = new GPoint(11, 30);
    iconGrey.infoWindowAnchor = new GPoint(5, 1);

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://www.golfinggreys.com/img/ggmap_icon_shopping.png';
    iconBlue.shadow = '';
    iconBlue.iconSize = new GSize(24, 31);
    iconBlue.shadowSize = new GSize(0, 0);
    iconBlue.iconAnchor = new GPoint(11, 30);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["attraction"] = iconPink;
    customIcons["accomm"] = iconOrange;
    customIcons["dining"] = iconPurple;
    customIcons["golf"] = iconGreen;
    customIcons["golfr"] = iconRed;
    customIcons["services"] = iconGrey;
    customIcons["shopping"] = iconBlue;
    var markerGroups = { "attraction": [], "accomm": [], "dining": [], "golf": [], "golfr": [], "services": [], "shopping": []};

	function load() {
		if (GBrowserIsCompatible()) {
		
		  var i = 0;
	
		  // Create the map
		  // Make sure this element has the same ID as your div
		  map = new GMap2(document.getElementById("googlemap"));
		  // Add controls for moving and zooming the map.  Use GSmallMapControl for small maps
          map.addControl(new GSmallMapControl());
		  // Add controls for switching between regular and satellite views
		  map.addControl(new GMapTypeControl());
		  // Set the starting position and zoom level when the map loads
		  map.setCenter(new GLatLng(51.920556,-103.798828), 7);
	
	
		  // Read the data from XML
		  var request = GXmlHttp.create();
		  // Open the XML file
		  request.open("GET", "east_central.xml", true);
		  request.onreadystatechange = function() {
			if (request.readyState == 4) {
			  var xmlDoc = request.responseXML;
			  // Obtain the array of markers and loop through it
			  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 GLatLng(lat,lng);
				var name = markers[i].getAttribute("name");
				var phone = markers[i].getAttribute("phone");
				var address = markers[i].getAttribute("address");
				var city = markers[i].getAttribute("city");
				var state = markers[i].getAttribute("state");
				var url = markers[i].getAttribute("url");
                var type = markers[i].getAttribute("type");
				var marker = createMarker(point,name,phone,address,city,state,url,type);
				map.addOverlay(marker);
			  }
			}
		  }
		  request.send(null);
		  
		  // Function to create the marker and set up the event window
		  function createMarker(point,name,phone,address,city,state,url,type) {
          var marker = new GMarker(point, customIcons[type]);
          markerGroups[type].push(marker);
			var markerhtml = "";
			if (name != "") markerhtml += "<b>" + name + "</b><br>";
			markerhtml += address + ", " + city + ", " + state + "<br>";
			if (phone != "") markerhtml += "p:" + phone + "<br>";
			if (url != "") markerhtml += "<a href=\"" + url + "\">COURSE DETAILS</a>";
			// Add a click event to each marker which will open the HTML window
			GEvent.addListener(marker, "click", function() {
			  marker.openInfoWindowHtml(markerhtml);
			});
			i++;
			return marker;
		  }
		}
		// Javascript alert for older browsers where Google Maps isn't supported
		else {
		  alert("Sorry, the Google Maps API is not compatible with this browser");
		}
	}
    //]]>

THE ADDITION
Code:

    function toggleGroup(type) {
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }

Just need to properly add that to the end. I am okay at editing and adapting codes, but I don't know the sytax. Tried JSLINT but still confused. Probably quite simple. Thanks

hello all,

what i would like to implement is the following :
http://mon.grnet.gr/network/maps/lite/?load&ip

but, the problem is that, although the numerical data that show the traffic volume passing through a link are available to me,
i do not have clue on how i can display them onto the map ... ?

i would be thankful, if you could give me a piece of advice.

I need help making this script output a route on the map on top of the dollar amount it outputs right now.

Here is a link to what im working on

http://stallionshockey.org/testweb/

Any help would be greatly appreciated

Thanks,
Josh

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.

We got a google maps with a bunch of pins. Each pin is setup to use our blue custom icon image.

I'm trying to make it so that when you click on a pin, that particular pin changes to a green version of the icon, and all the reset stay blue. If the user clicks another pin, it turns green and the previous goes back to blue.

Basicly only the clicked active pin should be green.

Code:

google.maps.event.addListener(markers[indx], 'click', function() {
    this.setIcon("/images/greenmarker.png");
});

Here is my code so far that will change the clicked pin into a green version.

My problem is all attempts to change all pins back to blue prior to changing this clicked pin to green fails bad.

Anyone know how to do this or point me in the right direction?

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