Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

google maps onClick marker

Posted on 2008-10-18
6
Medium Priority
?
10,233 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
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 2000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
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…

722 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