Google maps with multiple markers from a php array - google-maps-api-3

Question

Hi have an array of cities and want to create a google map using the javascript api v3 .
When the page loads the map keeps jumping to each marker. Also the the map becomes very small even though i have set a height and width to it .Here is my code for generating the map
<script>
var geocoder;
var map;
var timeout = 600;
var address_position = 0;
var address = [
<?php
foreach($cities_in_country as $item)
{
echo '"'.$item['name'].'",';
}
?>
];
function addMarker(position)
{
geocoder.geocode({'address': address[position]}, function(results, status)
{
address_position++;
if (address_position < address.length)
{
setTimeout(function() { addMarker(address_position); }, (timeout));
}
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
{
setTimeout(function() { addMarker(position); }, (timeout * 3));
}
else if (status == google.maps.GeocoderStatus.OK)
{ map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
icon:"<?=base_url()?>assets/goo/images/icons/marker.png",
});
}
});
}
function codeaddress() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 6,
center: latlng,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker(address_position);
}
$(document).ready(function() {
codeaddress();
});
</script>
and
<div id="map_canvas" style="width: 640px; height: 420px;"></div>

Answer 1

"the map keeps jumping to each marker." - that's because you call map.setCenter(results[0].geometry.location); within the addMarker function you're looping over. Remove that line and it'll stop recentering the map.
Also, you should change this; there's a danger that if you go over the query limit then you'll keep calling addMarker just with a longer timeout.
if (address_position < address.length)
{
setTimeout(function() { addMarker(address_position); }, (timeout));
}
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
{
setTimeout(function() { addMarker(position); }, (timeout * 3));
}
should maybe be
if (address_position < address.length)
{
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
{
setTimeout(function() { addMarker(position); }, (timeout * 3));
} else {
setTimeout(function() { addMarker(address_position); }, (timeout));
}
}