Solved

google maps onClick marker

Posted on 2008-10-18
6
10,211 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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Datatables.js Selecting a Row to get ID 5 37
Javascript object functions help 1 19
JS library vs Js framework 11 24
arrays and radio buttons 10 40
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 …
These days, all we hear about hacktivists took down so and so websites and retrieved thousands of user’s data. One of the techniques to get unauthorized access to database is by performing SQL injection. This article is quite lengthy which gives bas…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
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.

726 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