hi im working on a project for a friend to modified an existing website with a google map api.the site has some menu that link to a specified cluster on the google map and i want to add some more menu and link it to a marker on the map that i define my self. but im having some trouble to add marker for im new to google map api.
here is the code hope someone can point me to the right direction.
<script type="text/javascript">
function loadMap() {
}
</script>
<script type="text/javascript">
$(document).ready(function(){
if($('#map_canvas').length){
$.post('map.php', {
'type' : 'cat_id',
'id' : 1
}, function(m){
$offres = m.split('---');
var map = new GMap2(document.getElementById("map_canvas"));
map.setUIToDefault();
map.setCenter(new GLatLng(46.526626930135635, 6.647930145263672), 13);
var markers = [];
for($i = 0; $i < $offres.length; $i++) {
$o = $offres[$i].split('|');
$title = $o[1];
$latlong = $o[2] + '';
$coor = $latlong.split(',');
$long = $coor[1];
$lat = $coor[0];
var point = new GLatLng(parseFloat($lat), parseFloat($long));
var marker = new GMarker(point);
createMarker(marker, $title);
markers.push(marker);
}
var mgr = new MarkerClusterer(map, markers);
//mgr.addMarkers(markers);
mgr.resetViewport();
});
}
$('a.filter').click(function(e){
e.preventDefault();
$('.active-selector').removeClass('active-selector');
$(this).addClass('active-selector');
$('#region-wrapper').slideDown();
$('.print-list a.print-print').attr('href', '/staging/?tmpl=component&option=com_offers&cat_id=' + this.id);
});
$('#region-wrapper .submenu a').click(function(e) {
e.preventDefault();
var region = $(this).html();
//$('#example_filter input').val(region).keyup();
$('#datacolumn tr').hide();
$('#datacolumn td:contains("' + region + '")').parent('tr').show();
});
//map
$('#carte-wrapper a.filter').click(function() {
var catid = this.id;
var type = '';
if($(this).hasClass('submenuheader')) {
type = 'cat_id';
} else {
type = 'subcat_id';
}
$.post('map.php', {
'type' : type,
'id' : catid
}, function(m){
$offres = m.split('---');
var map = new GMap2(document.getElementById("map_canvas"));
map.setUIToDefault();
map.setCenter(new GLatLng(46.526626930135635, 6.647930145263672), 13);
var markers = [];
for($i = 0; $i < $offres.length; $i++) {
$o = $offres[$i].split('|');
$title = $o[1];
$latlong = $o[2] + '';
$coor = $latlong.split(',');
$long = $coor[1];
$lat = $coor[0];
var point = new GLatLng(parseFloat($lat), parseFloat($long));
var marker = new GMarker(point);
createMarker(marker, $title);
markers.push(marker);
map.setCenter(point, 13);
}
var mgr = new MarkerClusterer(map, markers);
//mgr.addMarkers(markers);
mgr.resetViewport();
});
});
$('#carte-wrapper #region-wrapper a.menuitem').click(function() {
var rid = this.id;
var type = '';
if($(this).hasClass('submenuheader')) {
type = 'region_id';
} else {
type = 'subregion_id';
}
$.post('map.php', {
'region' : true,
'rid' : rid,
'type' : type
}, function(m){
$offres = m.split('---');
var map = new GMap2(document.getElementById("map_canvas"));
map.setUIToDefault();
map.setCenter(new GLatLng(46.526626930135635, 6.647930145263672), 13);
var markers = [];
for($i = 0; $i < $offres.length; $i++) {
$o = $offres[$i].split('|');
$title = $o[1];
$latlong = $o[2] + '';
$coor = $latlong.split(',');
$long = $coor[1];
$lat = $coor[0];
var point = new GLatLng(parseFloat($lat), parseFloat($long));
var marker = new GMarker(point);
createMarker(marker, $title);
markers.push(marker);
map.setCenter(point, 13);
}
var mgr = new MarkerClusterer(map, markers);
//mgr.addMarkers(markers);
mgr.resetViewport();
});
});
});
function load_regResult(region){
$('#datacolumn tr').hide();
$('#datacolumn td:contains("' + region + '")').parent('tr').show();
}
function createMarker(marker, title) {
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(title);
});
}
</script>