asked on

google maps API

I am building a list to map and almost have it working.

I have a list of properties on one side and the map on the other. When I click on the address I want it to pan on the map.

I was reviewing this site:
https://stackoverflow.com/questions/14306098/google-maps-api-pan-to-markers-from-a-list

In my maps js I am using:

$("#contacts").on("click", "#{{p.Matrix_Unique_ID}}", function() {
var laLatLng = new google.maps.LatLng({{p.Latitude}}, {{p.Longitude}});
map.panTo(laLatLng);
map.setZoom(5);
});

And on my list I am using:

<a href="javascript:void(0)" id="{{p.Matrix_Unique_ID}}" data-city="{{p.Address}}">Map</a>

How do I register the click? That is the part I am not sure. If I hard code the lat/long it work so just need to understand the click.

zephyr_hex (Megan)

I'm not sure what you mean by "how do I register the click"

Do you mean the click on #contacts ?

If so, you can put a console.log() inside the function that triggers on click, and verify it's firing.

Robert Saylor

ASKER

the issue is I don't have #contacts in my code. This is the part that is confusing me.

zephyr_hex (Megan)

Ok. So, what element do you want to bind a click event to? Can you post the HTML for that element here?

Robert Saylor

ASKER

I want to bind this:

<a href="javascript:void(0)" id="{{p.Matrix_Unique_ID}}" data-city="{{p.Address}}">Map</a>

Note: using twig so {{p.Matrix_Unique_ID}} is a unique ID and {{p.Address}} is an address

ASKER CERTIFIED SOLUTION

zephyr_hex (Megan)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Saylor

ASKER

Thanks! I ended up binding on ID and that is working now. I have some more troubleshooting to do but this has got me over the hump. Thank you very much!

Robert Saylor

ASKER

Here is my updated code:

Note: I am producing one of these for each property. Seams to run fine.

This is looped...

<a href="#" id="map_{{p.Matrix_Unique_ID}}">Map</a>

Then in my google maps JS:

This is looped...

$("#map_{{p.Matrix_Unique_ID}}").on("click", function() {
console.log('{{p.Matrix_Unique_ID}}');
var laLatLng = new google.maps.LatLng({{p.Latitude}}, {{p.Longitude}});
map.panTo(laLatLng);
map.setZoom(12);
infoWindow.setContent("<div style = 'width:200px;min-height:20px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});