var markers = new Array();
$(function () {
$.ajax({
url: "json.php",
data: {get: 'value'},
success: function(data){
$.each(data, function(i, item) {
markers.push([data[i].filename, data[i].date, data[i].lat, data[i].long]);
});
var myOptions = { disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, markers);
}
});
$("a.imglink").fancybox({
'speedIn' : 600,
'speedOut' : 200
});
});
function setMarkers(map, markers) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var siteLatLng = new google.maps.LatLng(markers[i][2], markers[i][3]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
animation: google.maps.Animation.DROP,
title: markers[i][1],
html: markers[i][0]
});
google.maps.event.addListener(marker, "click", function () {
$('.imglink').attr('href', 'img/' + this.html);
$('.imglink').click();
});
bounds.extend(siteLatLng);
map.fitBounds(bounds);
}
}
Works great, but all my markers drop at the same time. Is there any way to add a delay between each marker? Thanks!
Take a look at setInterval. I think that could help you with your problem. That way you force the markers to drop one at a time. When all has dropped you can use clearInterval to stop it.
Here is a tutorial
In case anyone comes across this question without finding the answer from google, here's a link to Google answering this question directly: https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration
Related
I am trying to work out how to show custom data when a Google Maps markerclusterer marker is clicked but can't find this documented anywhere.
My markerclusterer code looks like this but my attempt at capturing the click event on a marker is not working:
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
google.maps.event.addDomListener(window, 'load', initialize);
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
/*
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
*/
for (var i = 0; i < numItemsToShow; ++i) {
var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom == -1 ? null : zoom;
size = size == -1 ? null : size;
style = style == -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP,
//styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"},{"color":"#052366"},{"saturation":"-70"},{"lightness":"85"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"-53"},{"weight":"1.00"},{"gamma":"0.98"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"},{"lightness":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"hue":"#3dff00"},{"saturation":"-100"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-18"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#57677a"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"40"}]}]
styles: [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#b5cbe4"}]},
{"featureType":"landscape","stylers":[{"color":"#efefef"}]},
{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#83a5b0"}]},
{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#bdcdd3"}]},
{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"}]},
{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e3eed3"}]},
{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},
{"featureType":"road"},
{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},
{"featureType":"road","stylers":[{"lightness":20}]}]
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
google.maps.event.addListener(markerClusterer, 'click', function () {
// do something with this marker ...
this.setTitle('I am clicked');
});
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
This works for me (it opens an infowindow when you mouseover the cluster icon, if you click on the cluster icon, the default behavior is to zoom to the cluster bounds, which makes it hard to see the change of the tooltip/title on the cluster icon):
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) {
// do something with this cluster ...
infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue());
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(map);
});
I developed a map application using gmap2. I used a groundoverlay (a temperature map) to help users to determine the location of interest and click to select. After gmap2 being replaced by gmap3, it stops working. The bigger problem is that I could not find a way to add markers on the groundoverlay by clicking in gmap3. Someone raised a similar question, but no answer has been available. I hope that such a function is not lost in gmap3. Your help is appreciated.
enter code here
<script>
var map;
var mapCenter = new google.maps.LatLng(54.508742, -125.120850);
var pngBounds = new google.maps.LatLngBounds(new google.maps.LatLng(48.3367, -139.0402),
new google.maps.LatLng(59.99008, -114.1095));
function initialize() {
var mapProp = { center: mapCenter, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var groundoverlay = new google.maps.GroundOverlay(
"http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds);
groundoverlay.setMap(map);
google.maps.event.addListener(map, 'click', function (event) { placeMarker(event.latLng); });
}
function placeMarker(location) {
var marker = new google.maps.Marker({ position: location, map: map, draggable: true });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In v3 you have to make the groundOverlay non-clickable
var groundoverlay = new google.maps.GroundOverlay(
"http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds, **{clickable:false}**);
use below code as simple as that..
let overlayGeoMapImg = new google.maps.GroundOverlay(
'../assets/GNDVI.png',
imageBounds);
overlayGeoMapImg.setMap(map);
google.maps.event.addListener(overlayGeoMapImg, 'click', (event: any) => {
this.ngZone.run(() => {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Hello World!'
});
});
});
I want to import kml files that contains more than 2000 placemarks into googla map.
I use google api v3.
I can only show 200 placemarks.
I know that I can use more layers, but I want only one because I have to refresh it weekly and I don't want to split every time.
Thanks for your replays
THIS IS THE CODE:
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.25,19.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
loadKmlLayer(map);
}
function loadKmlLayer(map) {
var ctaLayer2 = new google.maps.KmlLayer('https://.../asdf.kml', {
suppressInfoWindows: false,
preserveViewport: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
If your KML isn't very complex, you could try rendering it with a third-party KML parser (geoxml3 or geoxml-v3), see if that works (or points to the problem you are having with KmlLayer)
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.10,19.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating the JSON data
var json = [
DATA HERE LIKE:
{"title" :"City ZIP CODE STREET" , "lat" :47.2876 , "lng" :20.4978 ,"description" :"YOUR DESCRIPTION"},
]
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++)
{
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title,
// icon: iconimage
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})
//OnClick event
(marker, data);
}
} })();
I'm quite new to Google Maps API 3 and can't figure out the following error: All clicks on my markers open the infowindow on the same marker (bad), but with different text (good).
I'm pulling the data out of wordpress custom meta data into an xml, which i then parse; What makes me wondering is the fact that generating the markers works this way, but adding the listener for the infowindow obviously fails.
Any ideas what's happening here?
Live demo at:
http://goo.gl/9seK9
Code
$(document).ready(function(){
var infowindow;
var latlng = new google.maps.LatLng(47.580231,13.771362);
var settings = {
zoom: 8,
center: latlng,
panControl: true,
zoomControl: true,
mapTypeControl: true,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
jQuery.get("http://rundumadum.eu/de/wp-content/themes/rud/rundumadumMap.xml", {}, function(data) {
var xmllength = $(data).find("mymarkers").children().size();
var supermarkers = [];
jQuery(data).find("mymarker").each(function() {
var myid = $(this).find("id").text();
var mytitle = $(this).find("title").text();
var mylink = $(this).find("link").text();
var mylocation = $(this).find("location").text();
var mysplits = mylocation.split(",");
var mylat = mysplits[0];
var mylng = mysplits[1];
var mylatlng = new google.maps.LatLng(parseFloat(mylat), parseFloat(mylng));
var myinfo = ""+mytitle+"";
var marker = createMyMarker(mytitle, myinfo, mylink, mylatlng);
});
});
function createMyMarker(mytitle, myinfo, mylink, mylatlng) {
marker = new google.maps.Marker({
position: mylatlng,
map: map,
clickable:true,
icon:'http://rundumadum.eu/de/wp-content/themes/rud/static/img/markerTest.png',
html: ''+mytitle+''
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: myinfo});
infowindow.open(map, marker);
});
}
return marker;
});
Would be grateful for any ideas ...
One thing I notice is that the marker you are creating in createMyMarker is not declared using var marker, so it looks like you are inadvertently creating a global marker reference. Also, it appears that the statement: return marker is actually after the end of your createMyMarker function, although that may just be a typo that was introduced when you set up your code sample in your question.
At any rate, I believe if you change the code in createMyMarker to declare the marker using var marker within that function, it will give you better results.
Im having some problems with a street view map: http://server.patrikelfstrom.se/johan/fysiosteo/?page_id=118
Sometimes the window gets grey instead of showing the streetview. So my question is; Is there any way to know when the map has finished loading? I guess its treying to render the map before its completly loaded? Thanks
function initialize() {
var myLatlng = new google.maps.LatLng(57.6988062, 11.9683293);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Fysiosteo"
});
var panoramaOptions = {
position: myLatlng,
addressControl: false,
pov: {
heading: 90,
pitch: 0,
zoom: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
google.maps.event.addListener(panorama, 'idle', function() { console.log('done'); });
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
I tried with this code to print "done" to the console when the map has finished loading, but it didnt work. Am i doing it wrong? :)
The answer to your specific question ("Is there any way to know when the map has finished loading?") is: Yes. When a Map object is finished loading, it will trigger an idle event. Documentation of events that a Map object fires can be found at http://code.google.com/apis/maps/documentation/javascript/reference.html#Map.