How to trigger google maps marker by outside elements

4 Votes, Rating: 5

Tags: google map listener, map marker, trigger marker

Trigger Google Map Markers by Out Side Elements

Well here Im going to tell you about google map,google map markers and how to open infowindow from outside the map.

sometimes we face requirement to call map markers from outside the map elements like 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 with all address those already created markers on google map, you can fetch your db records also

My Address Array

<!--p
$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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"><!--mce:0--></script>;
 
<script type="text/javascript"><!--mce:1--></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"><!--mce:2--></script>
 
<script type="text/javascript"><!--mce:3--></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">
<!--p
$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&lt;?php echo $i;?&gt;" onclick="javascript:myclick('&lt;?php echo $i;?&gt;','&lt;?php echo $TotalRecords;?&gt;');">
<h2><!--p echo $breakit[0]--></h2>
Make: <!--p echo $breakit[1]-->
 
<!--p
}
unset($value);
--></li>
</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.

Now what ??

nothing just map div

<div id=”map” style=”width:100%; height:600px;”>

where map will display.

and we done.