I have ...
var ctaLayer = new google.maps.KmlLayer({
url: var_url,
suppressInfoWindows: false,
map: map,
preserveViewport: true
});
where var_url is a webservice where a date is passed so that what is returned changes based on a date selection. The issue i am having is that the all the markers displayed stack as if the previous eyars markers are not removed. Since i created the layer ctaLayer I was hoping it was going to be destroyed the next time I call this code but no..
Is there a way to check if ctaLayer exists and remove it before i call it again? I thought the local var ctaLayer = new google.maps.KmlLayer would do that.
Thanks
ctaLayer.setMap(null); removes the layer from the map.
Don't create a new KMLLayer each time, instead use a single KMLLayer and set a new url for the existing layer in subsequent calls:
ctaLayer.setUrl(var_url);
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 33.7489954, lng: -84.3879824},
noClear:true
}),
select=map.getDiv().querySelector('select'),
ctaLayer = new google.maps.KmlLayer({preserveViewport:true,map:map});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(select);
google.maps.event.addDomListener(document.getElementsByTagName('select')[0],'change',function(){
ctaLayer.setUrl('https://Services.oci.ga.gov/Geo_kml_Dust/default.aspx?Y='+this.value+'&t='+new Date().getTime());
});
google.maps.event.trigger(document.getElementsByTagName('select')[0],'change')
}
html, body ,#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map">
<select>
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
</select>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
Related
I am loading a KMZ on a Google Map using google.maps.KmlLayer. The KMZ contains a KML layer and some image files. I would like to display only the KML file on my map, but the image files are added as well.
Is there any way to remove non-KML elements (like a PNG file) from a KMZ archive displayed using google.maps.KmlLayer? I can't seem to find the PNGs as elements in the DOM, otherwise I'd just hide or remove them that way.
One possible solution might be to download the KMZ to the server, extract only the KML file, and add that to the map. But I'd like to try to keep this on the client-side if possible.
Here is an example of a KMZ archive that includes two PNG files (in this case, I'd only want to remove one of them, legend.png):
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {
lat: 41.876,
lng: -87.624
}
});
}
initMap();
var kmlUrl = 'https://www.weather.gov/source/crh/shapefiles/wwa.kmz';
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map" style="min-width: 800px; min-height: 660px"></div>
Per the documentation there is a KmlOptions property that disables the display of ScreenOverlays:
screenOverlays
Type: boolean
Whether to render the screen overlays. Default true.
Setting it to true removes that legend.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: {
lat: 41.876,
lng: -87.624
}
});
}
initMap();
var kmlUrl = 'https://www.weather.gov/source/crh/shapefiles/wwa.kmz';
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map,
screenOverlays: false
};
var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
I am new at Google Maps technologies.I want to blink or bounce google maps marker for a time interval for example one minute.Is it possible to do it? Could you please show me a way to succeed it?
The google.maps.Marker class supports setAnimation(animation:Animation) method, which according to the docs:
Start an animation. Any ongoing animation will be cancelled. Currently
supported animations are: BOUNCE, DROP. Passing in null will cause any
animation to stop.
So you can just call
marker.setAnimation(google.maps.Animation.BOUNCE);
to start bouncing animation and
marker.setAnimation(null);
to stop it. Working example:
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
marker.setAnimation(google.maps.Animation.BOUNCE);
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body onload="initMap();" style="margin:0px; padding:0px;" >
<div id="map" style="height:400px; width:500px;"></div>
</body>
Blinking animation is not supported out of the box, but you can create it yourself, the example is already included in other answers.
may cause errors. (using googlemap without apikey)
var on = true;
var intervalSeconds = 0.5;
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
setInterval(function() {
if(on) {
marker.setMap(null);
} else {
marker.setMap(map);
}
on = !on;
}, intervalSeconds * 1000);
#map {
width: 800px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
I suggest for blinking maps marker you can use .gif file since google maps marker does not support blinking animation.
Just change the source of your image to .gif file and it will work.
for example.
var mapIcon= "/assets/mapIcon.gif");
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: mapIcon,
optimized: false
});
[NOTE] Don't forget to add optimized: false because sometimes it will not work properly.
With the first script I create the map and add a marker to it with the second script (which does not work). I need to add the markers with a separate script because the marker data is retreived from my database. The query loops through records and provides the script with name and coordinates for markers. I know the problem is about the variable "map". If I move the marker script to within first script, it works. Can someone help me with this please?
<script type="text/javascript">
var map;
function GoogleLoadMap() {
var latLng = new google.maps.LatLng(35.337186, 33.337439);
var homeLatLng = new google.maps.LatLng(35.314246, 33.389347);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
};
</script>
<script type="text/javascript">
var marker<%=iii%> = new MarkerWithLabel({
position: new google.maps.LatLng(<%=lat%>, <%=lon%>),
draggable: true,
map: map,
labelContent: "<%=HNAME%>",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
var iw<%=iii%> = new google.maps.InfoWindow({
content: "<%=HNAME%>"
});
google.maps.event.addListener(marker<%=iii%>, "click", function (e) {
iw<%=iii%>.open(map, marker<%=iii%>); });
</script>
It is a timing problem. The map, which is initialized in the GoogleLoadMap() function (which I assume is run on the window load event, but you don't provide that code), is initialized after you create all your markers. You need to either initialize your markers after the map is initialized (inside the GoogleLoadMap function), or call the .setMap method on all the markers after initializing the map.
So these Google Maps were working fine and then all of a sudden they weren't. The only change I made was uploading new images for the markers. Upon inspection I can see that the new markers are loading properly and the console produces no errors (Chrome and FF). I have tried flipping the sensor between true and false, also with no luck. When I removed the sensor attrib it kicked back the standard alert error of needing it.
Am I missing something simple?
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false">
</script>
<script type="text/javascript">
var wildbasin = new google.maps.LatLng(30.310716, -97.824238);
var seucampus = new google.maps.LatLng(30.229723, -97.755275);
var austin = new google.maps.LatLng(30.275079, -97.792053);
var basinm = 'http://www.test.stedwards.edu/sites/default/files/wildbasinmarker_1.png';
var campusm = 'http://www.test.stedwards.edu/sites/default/files/maincampusmarker_0.png';
var map;
function initialize() {
var myOptions = {
zoom: 12,
center: austin,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var campus = new google.maps.Marker({
position: seucampus,
map: map,
title:"St.Edward's University",
icon: campusm
});
var thebasin = new google.maps.Marker({
position: wildbasin,
map: map,
title:"Wild Basin",
icon:basinm
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
While the map will default to 100% width, you need to set a height for the containing div. For example, this will solve your issue:
<div id="map_canvas" style="height:400px;"></div>
I'm trying to create my own map using google map.
I want to create a list showing all existing markers on the map. When user clicks on one button/link from the list, the corresponding marker will be centered and its infoWindow will be displayed, i.e. the same effects as the user clicks on the marker.
I have tried a number of solutions, but I could get none of them working. Can anyone please offer me a simple solution for this? Thanks in advance!
My existing code is as follows,
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(19.642588,151.171875),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick1 = function() {
var marker = this;
infoWindow.setContent('content of infowindow');
infoWindow.open(map, marker);
};
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(19.642588,151.171875),
});
google.maps.event.addListener(marker1, 'click', onMarkerClick1);
this won't center the map on it, but will move so the whole balloon is visible
http://econym.org.uk/gmap/example_map2.htm
as simple as i can get it. yes, please use GMarker etc.
don't forget this in the header <script src="http://maps.google.com/maps?...
you'll need html that includes
<div id="map" style="width: 550px; height: 450px"></div>
<div id="side_bar">Marker One<br /></div>
and then javascript
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(19.642588, 151.171875), 8);
var point = new GLatLng(19.642588, 151.171875);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("this marker has been clicked");
});
function myclick(i) {
GEvent.trigger(marker, "click");
}
map.addOverlay(marker);