CODEWITHSUNDEEP
google-maps-api-3maps
MsNichols
MsNichols

Reputation: 1133

Google Maps API v3 - Help Linking to Google Marker from Text Link

I have created a google map located at: http://calwestcultural.com/sgs/example_map.html

I am trying to link some text in my spry menu to the left with my google map markers/infowindow.

My javascript is limited as I tried to create ID's for each marker and link to that id but it did not work. I am stumped at this point.

I also would like my markers to display the name when you hover your mouse over it. I achieved this using a different style map but had problems creating markers so the current one I am using above will be my final, I just have to get the links to reference correctly.

PLEASE ANY HELP WITH THIS WOULD GET RID OF MY JS HEADACHE RIGHT NOW!!!!!!!!!

Upvotes: 0

Views: 1717

Answers (1)

Heitor Chang
Heitor Chang

Reputation: 6057

This page shows one way of connecting a sidebar link to your markers

http://www.wolfpil.de/v3/toggle-cats.html

Copying this page's patterns to your case, you need a gmarkers global variable

//<![CDATA[
var map = null;
var gmarkers = [];
function initialize() {

The order in which markers are added matters, they should match the order of the businesses in the sidebar. gmarkers will be updated in createMarker.

var point = new google.maps.LatLng(37.984798,-121.312094); 
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>')

...

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });
    gmarkers.push(marker);
}

With the array in place, we can address them by index. Wolfpil simply triggers a click event when a sidebar entry (link) is clicked:

function triggerClick(i) {
  google.maps.event.trigger(gmarkers[i],"click");
}

And each link can be written like this, replacing 0 and 1 with the order each marker was added:

<a href="javascript:triggerClick(0)">Bank of America</a>
<a href="javascript:triggerClick(1)">Bank of Stockton</a>

About the marker hover showing a title, the easiest way is adding a title option when creating your markers, but it would mean adding a new parameter to your createMarkers function: 

 function createMarker(latlng, storeName, html) {
  var contentString = html;

  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: storeName,
    zIndex: Math.round(latlng.lat()*-100000)<<5
  });

A better alternative in the long run is to use an object for gmarkers instead of the array, because adding an item in the middle of the list will disorganize the existing items in the HTML.

Then, places can be called by a string ID, such as gmarkers['safeway']. Instead of pushing a marker to the array in createMarker, we assign the id to the marker:

gmarkers[id] = marker;

If you run into trouble write comments below please! I didn't test the code above.

Upvotes: 1

Related Questions