1

When a user clicks on a marker on my map, I'd like it to have it's own URL.

For example, if a user clicks on Marker A, the url would change to http://example.com/m/132. Ideally, it would be linked to the markers ID in the SQL table.

The idea is that each marker, and therefore information section, can be shared. So, a user could share a review he wrote for Marker A (each marker will have a reviews system). If they shared it, the URL would be http://example.com/m/132/review#1 for example.

I've done a fair bit of research, but haven't come up with any solutions.

Can anyone point me in the right direction?

Thanks :)

tristanojbacon
  • 446
  • 1
  • 8
  • 22

1 Answers1

0

I would just attach a marker click event to each of your markers.

google.maps.event.addListener(marker, 'click', function() {
                alert('trigger url associated with marker');
            });

Normally if you have a lot of functionality within a map you store your markers themselves within an array so you can refer back to them. I would do that of course, but on top of it I would have another array directly associated with the markers that stores your urls. You could then use jquery to trigger the click of a hidden html link that prior to triggering you populate with your url stored in your marker url array. Let me know if you need more on this,as it is kind of difficult with no code to look at, but I am very sure the method I have laid out will work.

***Update here is how I would do it. :

html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 <script>
  function marker_onClick() {
   $('#myMarkerUrl').click();
  }
</script>
</head>
<body>
 <a id='myMarkerUrl' href='http://www.google.com' onClick="a_onClick()"> aaa </a>
</body>
</html> 
</body>
</html>

Then override in the url in the google maps addevent listener portion of code.

google.maps.event.addListener(marker, 'click', function() {
var myMarkersURL = myMarkersURLArray[i];
$("#myMarkerUrl").attr("href", myMarkersURL);                    
$('#myMarkerUrl').click();
                });

Now that you have that above, keep in mind I haven't tested this but it is generally what I would do in your shoes.

Bill Blankenship
  • 3,316
  • 6
  • 43
  • 73
  • Thanks for your help. Do I need to create an URL creation function first? (Still fairly new to all this) As I mentioned in another question you've contributed to, I'm just going to give out the URL - [link](http://sandbox.tristanbacon.me/citymap/). The main JS file can be found at /scripts/map.js (which I will change once the site leaves the production phase.) Thanks for your help :) – tristanojbacon Oct 08 '12 at 13:57
  • Possibly a function, at the time you add the listener to the marker you will need a url to set the jquery trigger. I would suggest just making a simple example work first. So trigger a standard html link click to google inside your event listener. Now your more complex version will be cycling through a whole list of markers with associated urls. So while you are adding markers to your map you will be adding the event listener with the associated url to your marker. Make sense? – Bill Blankenship Oct 08 '12 at 14:33
  • Yep, that makes sense. I'll give it a try, and see how it goes. Thanks! – tristanojbacon Oct 08 '12 at 16:14
  • Ok, so I've attempted to convert the entry ID to a url ID, and append it to the address bar (if that makes sense). Not having any luck, and although I found a nearly-working example, I can't make any sense of it: [link](http://www.geocodezip.com/v3_MW_example_linktomarker.html?marker=2) (In the source) - is there a way to easily merge that code into what I have here: [link](http://pastebin.com/vED8ZuVB)? – tristanojbacon Oct 08 '12 at 17:00
  • I was thinking about this the other day technically you would have to add each url holder programmatically within the addListener in order to have a place to click for each url. So, you would basically have a bunch of hidden urls in your page. – Bill Blankenship Oct 11 '12 at 21:15
  • I've only just been able to get back to work on this. I implemented the code you suggested, and all it does is go to Google(obviously). I'm confused as to how I'm supposed to link to the individual markers using this method?... – tristanojbacon Oct 18 '12 at 16:23
  • Funny, I have been thinking about this. It would go to google for each one, which means you would have to programmatically create an html link that is hidden for each marker on your page as this occurs. I would do this using jquery also. http://stackoverflow.com/questions/4261687/best-way-to-create-a-link-using-jquery – Bill Blankenship Oct 18 '12 at 16:31
  • That's all completely over my head. I'll look into it a bit more, but I think I might need to hire someone to code that function for me! (Interested?) – tristanojbacon Oct 18 '12 at 17:42
  • No need to hire me....I will see if I can get a working sample going. Comment back to this so I do it when I am at home sometime. – Bill Blankenship Oct 18 '12 at 20:54
  • i am swamped buddy i have been trying to get back to this but it is on the a far far away back burner sorry. – Bill Blankenship Nov 06 '12 at 02:41