We help IT Professionals succeed at work.
Get Started

google maps onClick marker

jimfrith
jimfrith asked
on
10,427 Views
Last Modified: 2012-05-05
ok I have a map that displays neighboring locations with a small marker and the current location with a large marker. (see the code below.)

The neighboring locations are created with a php loop.

I want an onclick event of the small markers to send my users to a new page.

I tried this :
 GEvent.addListener(marker, "click", function() {
          window.location.href="wiki_locations.php?loc_id=";
        });

but it adds the onclilck event to the large marker only.

the other problem I dont know how to solve yet is the location

wiki_locations.php?loc_id=

I need to add a variable loc_id= to the location with a variable unique to the marker which will also come from my php loop.  

how do I go about this?
var tinyIcon = new GIcon();
tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
tinyIcon.iconSize = new GSize(12, 20);
tinyIcon.shadowSize = new GSize(22, 20);
tinyIcon.iconAnchor = new GPoint(6, 20);
tinyIcon.infoWindowAnchor = new GPoint(5, 1);
 
// Set up our GMarkerOptions object literal
markerOptions = { icon:tinyIcon };
	  
      function createMarker(point) {
        var marker = new GMarker(point);
		
        GEvent.addListener(marker, "click", function() {
          window.location.href="wiki_locations.php?loc_id=";
        });
        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(<? echo $glat; ?>,<? echo $glong; ?>),9);
    
 
      
//loop through neighbouring locations
<?
while ($get_info = mysql_fetch_row($result2)){	
 
?>
   var point = new GLatLng(<? echo $get_info[3]; ?>,<? echo $get_info[4]; ?>);
      var marker = createMarker(point)
       map.addOverlay(new GMarker(point, markerOptions));
  <? } ?>
	   // show large marker for current location.
var point = new GLatLng(<? echo $glat; ?>,<? echo $glong; ?>);
      var marker = createMarker(point)
      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");
    }

Open in new window

Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 6 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE