Hi,
I am using map for mobile device. i have a main function which initializes
the map with geolocation and markers. I need to show markers as per the
category of items i select.. eg. for hotels category, i have to show markers
on the map. I have used overlay to remove previous markers when a new
category is selected and then i loop thru the ajax to get new markers....
but when i try to display these markers the map is blank and then i have to
jst shift the map so it fires change_bounds addEventListener and the marker
shows up. will paste the part of code below:
This is a single js file
// Global variables
var map;
var markersArray = [];
var sw;
var ne;
function initialize(catid)
{
category_id = catid;
document.addEventListener("deviceready", function(){}, false);
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position)
{
var latlng = new
google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var infowindow = new google.maps.InfoWindow();
// Display markers with infowindow
var marker, i;
// Get map bounds
google.maps.event.addListener(map, "bounds_changed", function() {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
// Ajax call to get markers as per NE-SW
//var category_id = 3;
sw = southWest.lat()+"%2C"+southWest.lng();
ne = northEast.lat()+"%2C"+northEast.lng();
var webdeal = 0;
var str =
"category_id="+category_id+"&sw="+sw+"&ne="+ne+"&webdeal="+webdeal;
var i=1;
$.ajax({
type: "GET",
url: "http://www.abc.com/markers?"+str,
dataType: "xml",
async: false,
cache: false,
success: function(xml){
$(xml).find("store").each(function(){
var storeLat = $(this).attr('latitude');
var storeLon = $(this).attr('longitude');
$(this).find("franchise").each(function(){
var merchant = $(this).find('merchant');
var storeName = merchant.attr('name');
// markers
marker = new google.maps.Marker({
position: new google.maps.LatLng(storeLat,storeLon),
map: map
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click',
(function(marker, i) {
return function() {
infowindow.setContent(storeName);
infowindow.open(map, marker);
}
})(marker, i));
i = i + 1;
}); // Franchise
});// Store
}
});
return false;
});
}
// Above code gives me proper markers for first time
Now onclick of category am callin the below function
// Clears map & show new markers
function generate_markup(cat_id)
{
// Clear existing markers
if (markersArray)
{
for (var i in markersArray)
{
markersArray[i].setMap(null);
}
}
// Add new markers
category_id = cat_id;
var webdeal = 0;
// Display markers
var marker, i;
var str =
"category_id="+category_id+"&sw="+sw+"&ne="+ne+"&webdeal="+webdeal;
var i=1;
$.ajax({
type: "GET",
url: "http://www.abc.com/apis/markers?"+str,
dataType: "xml",
//async: false,
//cache: false,
success: function(xml){
$(xml).find("store").each(function(){
var storeLat = $(this).attr('latitude');
var storeLon = $(this).attr('longitude');
$(this).find("franchise").each(function(){
var merchant = $(this).find('merchant');
var storeName = merchant.attr('name');
// markers
marker = new google.maps.Marker({
position: new google.maps.LatLng(storeLat,storeLon),
map:map
});
markersArray.push(marker);
}); // Franchise
});// Store
if (markersArray)
{
for (var j in markersArray)
{
markersArray[j].setMap(map);
}
}
}
});
return false;
}
Please let me know how to display markers on category select without page
refresh thru setMap.
Thanks
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
