Solved

google maps onClick marker

Posted on 2008-10-18
6
10,194 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
  • 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
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.

911 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now