Egmap How To Make Marker Focus On What I Select On My Result List Beside Or Vice Versa

Yii 1.1 Extensions
1

Hi,

I have a result list(navigation sidebar) of items on right hand side and the Google map on the other side. I would like my google marker focus on what I selected an item on the result list, and also the other way. I tried to look for examples but none I could find.

Help.

Jack

2

I declare each marker with an unique JSName ‘marker’.$i. Then I tried to use google.map.event.trigger(marker1, ‘click’); to trigger a click event outside of the map to specific marker according to it’s JSName. However, it responds an ReferenceError about marker1 is not defined. Can anyone help me here??

Thanks.

3

I think I am able to get response fast from EGMAP extension group. However, I resolved the problem myself.

I use jquery-ui-map instead of EGMAP, because EGMAP lacks of documentation and example guidance on functionality. The problem related to this ticket was because marker varaible always define inside JS function. So, there are no way for you to trigger any marker event listener outside the map (which is outside the funcation). I hope this problem can be consider in EGMAP future plan.

Thanks

Some solution on using jquery-ui-map with sidebar/navigation.




<script type="text/javascript">

var marker = null;

var marker2 = null;

function initialize() {

	


var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

var mapOptions = {

  zoom: 4,

  center: myLatlng,

  mapTypeId: google.maps.MapTypeId.ROADMAP

  

}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


var contentString = 'TESTING';


var infowindow = new google.maps.InfoWindow({

	content: contentString

});

// marker 1 

marker = new google.maps.Marker({

    position: myLatlng,

    map: map,

    title:"Hello World!",

    marker_id: "marker1"

});

// listener to show infowindow on click.

google.maps.event.addListener(marker, 'click', function(){

	infowindow.open(map, marker);

});


// marker 2

marker2 = new google.maps.Marker({

    position: new google.maps.LatLng(45.42153,-75.697193),

    map: map,

    title:"Hello World!",

    marker_id: "marker1"

});

// listener to show infowindow on click.

google.maps.event.addListener(marker2, 'click', function(){

	infowindow.open(map, marker2);

});

// listener to change background color on element outside google map.

google.maps.event.addListener(marker2, 'click', function(){

	document.getElementById('markerLink').style.background="RED";

});

}

</script>

HTML LINK CODE OUTSIDE THE MAP USE TO TRIGGER MARKER IN MAP.




<a id="markerLink" href="javascript:google.maps.event.trigger(marker,'click');">TEST LINK MARKER</a>

<br/>

<a href="javascript:google.maps.event.trigger(marker2,'click');">TEST LINK MARKER2</a>