jquery - Can't print map per address -

jquery - Can't print map per address -

following google map api 3 example.

at bottom of body, includes jquery file , below

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

html

<table> <tr><td> <div id="map_canvas" class="address" style=" width: 100%; height: 200px;">san francisco</div> </td></tr> <tr><td> <div id="map_canvas" class="address" style=" width: 100%; height: 200px;">san diego</div> </td></tr><tr><td> <div id="map_canvas" class="address" style=" width: 100%; height: 200px;">san jose</div> </td></tr></table>

jquery

var map; var geocoder = new google.maps.geocoder(); function initialize() { var mapoptions = { zoom: 9, pancontrol: false, streetviewcontrol: false, maptypecontrol: false } map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); } var address = $(".address"); var el; address.each(function(){ el = $(this).text(); codeaddress(el); }); function codeaddress(address) { alert(address); geocoder.geocode( { 'address': address }, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); } else { alert('geocode not successful next reason: ' + status); } }); } google.maps.event.adddomlistener(window, 'load', initialize);

my first effort working googlemap api 3 - looked around answer.

there dynamic multiple addresses printing out in each table row. grab each address div.address , each address converted lat , longitude , display map.

but right not checking each or looping address converted lat , longitude before map displayed positioned marker.

why isn't looping each address? there way grab , loop through addresses div.address text , convert display map?

jsfiddle demo

as can see, there 1 wrong map appearing on jsfiddle :(

updated #1

managed 1 map appear markers, still couldn't 3 separate maps each marker per address. couldn't figure why printed 1 map markers in first row.

appreciate help , insight if any

help please

jquery google-maps-api-3