How to trigger google maps marker by outside elements,Google Maps-css gallery, css scripts showcase, Twitter tricks, php scripts,ajax scripts, Twitter API help, examples, CMS Drupal,CMS Joomla,CMS WordPress:W3CGallery.com

How to trigger google maps marker by outside elements

1 Votes, Rating: 5 1 Star

Tags: google map listener, map marker, trigger marker

Trigger Google Map Markers by Out Side Elements

Well here we going to talk about google map, google map markers and how we can open infowindow outside the map.

Its a long time later I’m adding this new post on this site about google map and markers.

some time we face requirements to call map markers by outside the map elements or a links, or buttons.

Is this possible to call marker infowindow by any button from outside the map ???

YES, Its can possible and easy too.

First of all we have to create some dynamically marker on map ( how to create dynamically marker see in other post ).as below

for this we need an array of all address those create markers on google map, you can fetch your db records also

My Address Array

<?php
$LocationARRAY = array("1700 N Hwy 385 Texas 79714#Ford","1708 Lubbock Hwy Texas 79316#Lincoln","1003 West Commerce Texas 76801#Mercury");
?>

Javascript codes for create marker by array

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>;
 
<script type="text/javascript">
  $(document).ready(function(){
      if (GBrowserIsCompatible()) {
 
        var map = new GMap2(document.getElementById("map"));
		map.setMapType(G_PHYSICAL_MAP); 
 
map.setUIToDefault();		
 
        var bounds = new GLatLngBounds();
 
		<?php
//////////////////////////// you can use your database and php query to fetch your address from your database table, just change foreach loop to while or what you want
		$i=0;
		foreach ($LocationARRAY as $value) {
		$i++;
 
		$breakit = explode('#',$value);
 
		$addess = $breakit[0];
 
?>		        
 
 	 addMarkerByAddress("<?php echo $addess;?>", map, bounds, '<?php echo $breakit[1];?>', "<h3><?php echo $addess;></h3>Make: <?php echo $breakit[1]; ?>",9);  
 
<?php
  }
unset($value);
?>
 
      }
   });
 
	   </script>

Now google map functions to create marker by address.

no change need in this query. but you can only change marker images. DONT FORGET TO TAKE GOOGLE MAP KEY FOR YOUR DOMAIN.

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=YOUR_GOOGLE_MAP_KEY" type="text/javascript"></script>
 
<script type="text/javascript">
 
var side_bar_html = "";
var SANmarkers = [];
var SANhtml = [];
var i = 1;
 
// zoom level not work
function addMarkerByAddress (address, map, bounds, id, html,zoom) {
 
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address, function(point) {
if (point) {
bounds.extend(point);
var marker = new GMarker(point);
//map.setCenter(point, 12);
map.setCenter(point, zoom);
map.addOverlay(createMarker(point, id, html));
 
}
});
 
}
 
function createMarker(point, id, html) {
//alert(id);
// Create a lettered icon for this point using our icon class
var newIcon = new GIcon();
newIcon.image = ""+ id +".png";
newIcon.shadow = "shadow50.png";
 
newIcon.iconSize = new GSize(76, 93);
newIcon.shadowSize = new GSize(117, 91);
newIcon.iconAnchor = new GPoint(6, 20);
newIcon.infoWindowAnchor = new GPoint(40, 30);
var marker = new GMarker(point, newIcon);
 
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
 
//GEvent.addListener(marker, "click", function() { window.location = link;
});
 
SANmarkers[i] = marker;
SANhtml[i] = html;
i++;
 
return marker;
 
}
 
function myclick(i,t) {
//alert(i);
SANmarkers[i].openInfoWindowHtml(SANhtml[i]);
 
for (s=1;s&lt;=t;s++)
{
document.getElementById("SanBox"+s).className = "";
}
document.getElementById("SanBox"+i).className = " active";
}
 
</script>

Above code take value and create markers.

Now code your query to create outside elements ( buttons) to trigger markers

Here we going to run same query to display buttons on html page, later by these buttons we will trigger google map markers info window.. see how

<ul id="navlist3">
<?php
$TotalRecords = count($LocationARRAY);  ///////// Total numbers of records to send to map query
 
$i=0;
foreach ($LocationARRAY as $value) {
$i++;
 
$breakit = explode('#',$value);
 
$addess = $breakit[0];
 
$DealerAddress = $breakit[1];
?>
 
<li id="SanBox<?php echo $i;?>" onclick="javascript:myclick('<?php echo $i;?>','<?php echo $TotalRecords;?>');">
<h2><?php echo $breakit[0];?></h2>Make: <?php echo $breakit[1];?>
</li>
<?php
}
unset($value);
?>
</ul>

If you check above code we have use onclick event on <li> we are sending unique number ($i) and total records numbers. and also we have given a unique name of each <li> by ( $i). it will help to know button id.