Solved

google maps onClick marker

Posted on 2008-10-18
6
10,187 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

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 …
Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

747 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

12 Experts available now in Live!

Get 1:1 Help Now