Hello -
I am using Appey's Google Maps component. I overwrite the markers on page load. However, somehow for a very brief moment google maps renders with default marker and them refreshes to show my custom markers.
Is there a way to prevent google maps from rendering with default markers ?
Thx.
Hi Kapil -
Can you show the code you are using?
The code is a bit long but let me try.
function gmap() {
var map = Appery('homescreen_googlemap');
var iconBase = 'files/views/assets/image/';
// We have added geolocation service to the page on load
// There are two hidden variables - currentlat, currentlong which will have the current lat-long before this function is called.
Code: Select all
// var myLatlng = new google.maps.LatLng(37.65, - 122.4250); // some default
var myLatlng;
//get users current location :
// var usrCurrentLat, usrCurrentLong;
// usrCurrentLat = $('#currentlat').val();
//usrCurrentLong = $('#currentlong' ).val();
//alert ("usrCurrentLat= " + usrCurrentLat);
// var lat = localStorage.getItem('currentLat');
// var lng = localStorage.getItem('currentlong');
//alert('lat=' + lat);
//alert('lng=' + lng);
// myLatlng = new google.maps.LatLng(lat, lng);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
console.log(position.coords.latitude);
console.log(position.coords.longitude);
myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map($('div[dsid="homescreen_googlemap"]').get(0), mapOptions);
// Now that we have user's current location we need to find all messages within 500 yards
// We will need to make a server call and get the JSON object
// Send params – appid, user-token, current location, radius, current time, lastrefresh time
//get - user-token, Message {from, to, lat-long, msg content, msg type, display time, }}
// we might have to do some localmemory and query optimization.
//let us assume we get the messages in an array
//element 8 is if we should show reply button or not
var messages = [
['Private Sender', 'to', '37.7628', '-121.8909', 'msg text', 'msg pic url', 'all-msg.png', 'no-reply'],
['Amit Khanna', 'Me', '37.7638', '-121.8909', 'Hey man, I hope you had a good flight', 'msg pic url', 'contact-msg.png', 'can-reply'],
['Bob Henley', 'Me', '37.7648', '-121.8909', 'Remember me !!! ', 'msg pic url', 'other-msg.png', 'can-reply'],
['Damn it', 'Me', '37.7658', '-121.8909', 'Do you have tiks? ', 'msg pic url', 'question-msg.png', 'can-reply'], ];
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
var markersArray = [];
var marker2, i;
for (i = 0; i < messages.length; i++) {
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(messages[i][2], messages[i][3]),
map: map,
icon: new google.maps.MarkerImage(iconBase + messages[i][6],
new google.maps.Size(30, 30),
new google.maps.Point(0, 0),
new google.maps.Point(0, 0),
new google.maps.Size(30, 30)), //added for chaanging icon size if zoom changes
animation: google.maps.Animation.BOUNCE,
});
markersArray.push(marker2);
//I have added the function in a loop but this will cause performance problem. So, we should take it outside the loop
google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
return function() {
var contentString = '' + '' + '' + '' + ' [b]From: [/b]' + messages[i][0] + 'Message: ' + messages[4] + '
' + '
' + 'a class="google_infowindow_reply ui-link ui-btn ui-btn-f ' + ' ui-icon-none ui-btn-icon-nowhere ui-shadow ui-corner-all" name="google_infowindow_reply" rel="nofollow" ' + 'Reply ' + '' + ' ' + '
' + '' + '';
Code: Select all
infowindow.setContent(contentString);
if (marker2.getAnimation() !== null) {
marker2.setAnimation(null);
} else {
marker2.setAnimation(google.maps.Animation.BOUNCE);
}
infowindow.open(map, marker2);
};
})(marker2, i));
}
//use marker clusters to improve performance
//See : http://google-maps-utility-library-v3.googlecode.com/svn/trwunk/markerclusterer/docs/examples.html
// Looks like it is working
var mcOptions = {
gridSize: 50,
maxZoom: 15
};
var mc = new MarkerClusterer(map, markersArray, mcOptions);
//Add animation to dropping markers on the map
for (var j = 0; i < markersArray.length; i++) {
setTimeout(function() {
addMarkerMethod();
}, j * 1000);
}
//addin custom control ( bar on the right of the google map)
// Create a div to hold the control.
var controlDiv = document.createElement('div');
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
controlDiv.style.padding = '5px';
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '0px';
controlUI.style.borderColor = 'white';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.style.opacity = '0.6';
controlUI.title = 'Filter';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior. - ALL
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
//Create image elements
//var all_msg_div = document.createElement('div');
var all_msg = document.createElement('img');
all_msg.id = 'all-msg';
all_msg.src = iconBase + 'all-msg.png';
all_msg.alt = 'All Messages';
all_msg.height = '24';
all_msg.width = '24';
google.maps.event.addDomListener(all_msg, 'click', showAllMsg);
controlText.appendChild(all_msg);
controlText.appendChild(document.createElement('br'));
//all_msg_div.appendChild(all_msg);
//controlText.appendChild(all_msg_div);
//controlText.innerHTML(document.createElement('br'));
var contact_msg = document.createElement('img');
contact_msg.id = 'contact-msg';
contact_msg.src = iconBase + 'contact-msg.png';
contact_msg.alt = 'Contact Messages';
contact_msg.height = '24';
contact_msg.width = '24';
google.maps.event.addDomListener(contact_msg, 'click', showContactMsg);
controlText.appendChild(contact_msg);
controlText.appendChild(document.createElement('br'));
var other_msg = document.createElement('img');
other_msg.id = 'other-msg';
other_msg.src = iconBase + 'other-msg.png';
other_msg.alt = 'Other Messages';
other_msg.height = '24';
other_msg.width = '24';
google.maps.event.addDomListener(other_msg, 'click', showOtherMsg);
controlText.appendChild(other_msg);
controlText.appendChild(document.createElement('br'));
var hookup_msg = document.createElement('img');
hookup_msg.id = 'hookup-msg';
hookup_msg.src = iconBase + 'hookup-msg.png';
hookup_msg.alt = 'Hook up';
hookup_msg.height = '24';
hookup_msg.width = '24';
google.maps.event.addDomListener(hookup_msg, 'click', showHookupMsg);
controlText.appendChild(hookup_msg);
controlText.appendChild(document.createElement('br'));
var info_msg = document.createElement('img');
info_msg.id = 'info-msg';
info_msg.src = iconBase + 'info-msg.png';
info_msg.alt = 'Information';
info_msg.height = '24';
info_msg.width = '24';
google.maps.event.addDomListener(info_msg, 'click', showInfoMsg);
controlText.appendChild(info_msg);
controlText.appendChild(document.createElement('br'));
var question_msg = document.createElement('img');
question_msg.id = 'question-msg';
question_msg.src = iconBase + 'question-msg.png';
question_msg.alt = 'Question';
question_msg.height = '24';
question_msg.width = '24';
google.maps.event.addDomListener(question_msg, 'click', showQuestionMsg);
controlText.appendChild(question_msg);
controlText.appendChild(document.createElement('br'));
var ad_msg = document.createElement('img');
ad_msg.id = 'ad-msg';
ad_msg.src = iconBase + 'ad-msg.png';
ad_msg.alt = 'Advertisement';
ad_msg.height = '24';
ad_msg.width = '24';
google.maps.event.addDomListener(ad_msg, 'click', showAdMsg);
controlText.appendChild(ad_msg);
controlText.appendChild(document.createElement('br'));
var private_msg = document.createElement('img');
private_msg.id = 'private-msg';
private_msg.src = iconBase + 'private-msg.png';
private_msg.alt = 'Private';
private_msg.height = '24';
private_msg.width = '24';
google.maps.event.addDomListener(private_msg, 'click', showPrivateMsg);
controlText.appendChild(private_msg);
controlText.appendChild(document.createElement('br'));
var new_msg = document.createElement('img');
new_msg.id = 'new-msg';
new_msg.src = iconBase + 'new-msg.png';
new_msg.alt = 'New';
new_msg.height = '24';
new_msg.width = '24';
google.maps.event.addDomListener(new_msg, 'click', showNewMsg);
controlText.appendChild(new_msg);
controlUI.appendChild(controlText);
// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
//var controlDiv = document.createElement('div');
//var myControl = new MyControl(controlDiv);
// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;
// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.LEFT_CENTER].push(controlDiv);
//Change marker size based on zoom
//see http://stackoverflow.com/questions/12456317/api-google-map-v3-change-markers-size-on-zoom-changed
//https://developers.google.com/maps/documentation/javascript/markers#icons
//All this works now
google.maps.event.addListener(map, 'zoom_changed', function() {
// var length = 20 + (5 *(map.getZoom() - 9));
//var ratio = length / 40;
var length = 1 + map.getZoom() * 2;
var height = length;
//alert('length=' + length + ' height=' + height);
// alert('markersarray=' + markersArray.length);
for (i = 0; i < markersArray.length; i++) {
var icon = markersArray[i].getIcon();
markersArray[i].setIcon(new google.maps.MarkerImage(
icon.url,
new google.maps.Size(length, height),
new google.maps.Point(0, 0),
new google.maps.Point(0, 0),
new google.maps.Size(length, height)));
}
//markersArray[i].setAnimation(google.maps.Animation.BOUNCE);
}); }
/a
Hello Kapil,
Please share your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a, tell us its name and steps to test.
done. try blapperspot app.
Hello!
We can't reproduce it in Chrome. Could you give exact steps to reproduce?