Adding a JavaScript function to a repeat region in PHP

Question

I have an area on a webpage (defined as a div), displaying various bits of information about people from a database. I have a repeat region on the database to produce a new div for each user in the database.

What I would like to do is have a Google map in each of these areas showing the exact location of the user from the postcode stored in the database. Ive achieved this in the first area but only because I am calling the function:

google.maps.event.addDomListener(window, 'load', initialize);

and so am only calling the function once, when the page is loaded (correct?).

also, as I am passing the name of the div containing the map <div id="map-canvas"> to the google function, I presume ill have to create a unique ID for each of the areas so the google function knows which div its referring to. How do I accomplish this, and how do I include the 'function call' for each of the repeat region areas so as to create a new map for each one?

Answer 1

You will certanly have to bind each map display area to the Google engine, but once it's done, you are free to change the display area without recreating the div.

Moreover, I assume there will be a physical limit for the number of maps you can display on a single page.

So maybe you could create, say, half a dozen of pre-initialized map areas and use them to display the location(s) of whatever person(s) you're currently focusing in? It takes only a call to display the location from the address.

Answer 2

Yes, you have to create a div to each(and with different id each) map. You can reuse some code like this:

1. Create an object with common properties of the maps(I supose they will have some common properties like zoom or mapTypeId ):

    var mapOptions = { zoom: 10, mapTypeId: google.maps.MapTypeId.TERRAIN }; 

2. Then your PHP loop:

    $i = 0; while (@extract(mysql_fetch_assoc($resource))) { // Javascript code ?> var newOptions = mapOptions; newOptions["center"] = new google.maps.LatLng(<?php echo "$lat, $lng"; ?>); var map<?php echo $i; ?> = new google.maps.Map(document.getElementById('map<?php echo $i; ?>'), newOptions); <?php // HTML elements <?php echo "<div id='map$i'></div>"; ?> $i++; } 

Of course these codes are an example because I don't know your code, so you'll have to adjust to your needs.