Solved

google maps onClick marker

Posted on 2008-10-18
6
10,223 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

0
Comment
Question by:jimfrith
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22750406
You create new Gmarker for each neighbor, to which the click event is not binded.
 36: map.addOverlay(new GMarker(point, markerOptions));
should be
 map.addOverlay(marker);
If you need markerOptions, you will need to modify your createMarker function.

The location should look something like this:
window.location.href="wiki_locations.php?loc_id=<?php echo $loc_id ?>";
0
 

Author Comment

by:jimfrith
ID: 22750505
Im using map.addOverlay(marker); for the large marker.  there are two types here.

map.addOverlay(new GMarker(point, markerOptions));
creates the small markers and is working.  except that my link is being added to the large marker and not the small ones.

also I can't add the php variable directly to the location because that would send all of the clicks to the same place.  I need to know how to add the location variable to the marker in my loop. so that each marker has a unique link.
 
0
 

Author Comment

by:jimfrith
ID: 22750544
actually if I just declare a variable in my loop

var loc = 'wiki_locations.php?loc_id=<? echo $get_info[0]; ?>';

then maybe I can create the link like this:

 function createMarker(point) {
        var marker = new GMarker(point);
            
        GEvent.addListener(marker, "click", function() {
          window.location.href=loc;
        });
        return marker;
      }

I still don't know how to add the link to the small markers rather than the large one though.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 16

Expert Comment

by:sh0e
ID: 22750614
The problem right now is that you are creating a new GMarker twice for the small ones.  But the only one making it to the overlay (becoming visible) is not being binded to an event.

//replace line 34 to 36
var point = new GLatLng(<? echo $get_info[3]; ?>,<? echo $get_info[4]; ?>);
      var marker = createMarker(point)
 
      var marker1 = new GMarker(point, markerOptions);
        GEvent.addListener(marker, "click", function() {
          window.location.href="wiki_locations.php?loc_id=";
        });
       map.addOverlay(marker1);

Open in new window

0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22750616
Argh.  I made a mistake in my last post and accidentally clicked submit with the wrong code. Bah, third time today.
//replace line 34 to 36
var point = new GLatLng(<? echo $get_info[3]; ?>,<? echo $get_info[4]; ?>);
      var marker = createMarker(point)
 
      var marker1 = new GMarker(point, markerOptions);
        GEvent.addListener(marker1, "click", function() {
          window.location.href="wiki_locations.php?loc_id=";
        });
       map.addOverlay(marker1);

Open in new window

0
 

Author Closing Comment

by:jimfrith
ID: 31507500
Brilliant! thanks for that.  thats exactly what I needed.
0

Featured Post

Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question