I have a KMZ file that i load into my google maps application via link using javascript. The file works perfectly in Google Earth. The problem is in my application when i click in one of the many elements (areas): the returned description data is always from only one of the elements, not displaying the actual clicked, correct, element. This is what i've tried:
Check if the click event in the map is correct by placing a marker in the clicked position, it is correct.
Convert the data into KML using Google Earth, place it into my google drive as public, and using a direct download link from google drive in my application. It displayed the data but the error continued.
Created the most basic/blank application using just the layer to make sure anything else in my other application is interfering. Also didn't work.
The file is in this website: https://www.voanaboa.pt/codigo-drone named as "Regulamento RPA_ver_5.0.kmz”
Here's the only file that creates a basic application using the kmz file, i've removed my API key for privacy.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'https://www.voanaboa.pt/Files/downloads/Regulamento-RPA-ver-5.0.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry&callback=initMap"
async defer></script>
Most (but not all) of your placemarks have the same ID "ID_00000"). If I change that to be unique, the polygon's descriptions become unique:
example with unique ids
Per the KML reference, that doesn't have to be unique (it is a "stanard XML ID", but I am guessing the rendering code is assuming it is.
code snippet with updated kmz file:
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'http://www.geocodezip.com/geoxml3_test/kmz/Regulamento-RPA-ver-5.0a.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>
Related
I have a map, which populates markers based on search. I'm attempting to user the newer google maps feature AdvancedMarkerView so I can fill it with custom HTML - however, as my search updates, I want to flush the old markers and place new ones when it's called for...and I can't for the life of me figure out how to? https://developers.google.com/maps/documentation/javascript/reference/advanced-markers
The following places the custom markers. It works.
const content = document.createElement('div');
content.className = 'marker-title';
content.textContent = item.title;
const marker = new google.maps.marker.AdvancedMarkerView({
map,
position: item.position,
content
});
Normally for markers, as in the old markers, I've removed them with the following code, markers.forEach((marker) => marker.setMap(null)) however this doesn't seem to work for the advanced markers. Since the marker returned when creating the advanced marker points to the element, I also tried doing a marker.remove() thinking the HTML element would be targeted, but no cigar.
I haven't been able to find any concrete examples on the Google API docs, when it comes to advanced markers, and same for others asking the same question.
There is no setMap() or other method to call on the AdvancedMarkerView class to toggle its visibility or remove it from the map.
Although it is not super clear, the documentation says:
To remove a marker from the map, set the markerView.map property to null.
Working example below:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.39094933041195, lng: -122.02503913145092 },
zoom: 14,
mapId: "4504f8b37365c3d0",
});
const draggableMarker = new google.maps.marker.AdvancedMarkerView({
map,
position: { lat: 37.39094933041195, lng: -122.02503913145092 },
draggable: true,
title: "This marker is draggable. Click to remove.",
});
draggableMarker.addListener("click", (event) => {
// Remove AdvancedMarkerView from Map
draggableMarker.map = null;
});
map.addListener("click", (event) => {
// Set AdvancedMarkerView position and add to Map
draggableMarker.position = event.latLng;
draggableMarker.map = map;
});
}
window.initMap = initMap;
#map {
height: 160px;
}
p {
font-family: Arial;
font-size: 0.75em;
margin: 2px 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Draggable Advanced Marker</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<p>Click marker to remove it from map. Click on map to reposition / add marker.</p>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>
I am using the google maps API in angular 10, and I am finding some inconsistencies with toggling a DROP animation.
The JSFiddle on the official documenation has a demo toggling the bounce animation.
However, my use case is having multiple markers on a map, each time a marker is clicked, it will DROP in (not bounce). I've tried altering the JSFiddle to make this work by adding a second marker to the map and using a toggle for both.
I can't find a lot of documentation on the Marker.animation and Marker.animating properties for the different animations. I suspect that when a marker has the DROP animation, these 2 properties are set to null after the animation has completed.
marker.addListener('click', () => marker.setAnimation(google.maps.Animation.DROP))
The above does not work.
To get the marker to drop again, set the map property to null (removing it from the map), then set the animation again, and add the marker to the map.
marker.setMap(null);
marker.setAnimation(google.maps.Animation.DROP);
marker.setMap(map);
proof of concept fiddle
code snippet:
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: {
lat: 59.325,
lng: 18.07
},
});
marker = new google.maps.Marker({
map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {
lat: 59.327,
lng: 18.067
},
});
marker.addListener("click", function() {
toggleDrop(map);
});
}
function toggleDrop(map) {
marker.setMap(null);
marker.setAnimation(google.maps.Animation.DROP);
marker.setMap(map);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Marker Animations</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>
</html>
Hi all i have task to create monitoring of 200 ip addresses and for each of this ip we have location latitude/longitude. Now for the monitoring purpose i have perl script runing which pings all 200hosts and update their status in MySql database.
Now i want to display these 200 locations on google maps and change marker color depending on status Green = online, Red = offline.
Also i have loaded kml fille with location of the connections and street cabling ( This is fixed and no changes are needed )
How can i generate markers dynamically and display them all together with already loaded kml fille?
Or if there is any other solution i am willing to consider it.
Here is a sample where i am loading my kml fille:
<!DOCTYPE html>
<html>
<head>
<title>KML Layers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=MY API&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
"use strict";
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 35.928926,
lng: 14.462688
}
});
const ctaLayer = new google.maps.KmlLayer({
url: "MY KML ADDRESS",
map: map
});
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I ended up using
MySql to Maps
This question already has an answer here:
Google Maps Api V3 - Styling countries or cities
(1 answer)
Closed 5 years ago.
I want to show in my website only certain places using GoogleMap.It shouldn't show any small places.Only major places should be visilble in map.What is procedure to obtain this?
Set your lat/lon to the location of a post office (or other city indicator).
Then, use the zoom property to fix to the level you want to encompass.
See: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here is the code form the example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
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!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Try that script at map.zoom = 16. Should be close to city view. London I think.
You can also set map bounds, but that is a lot harder. You would need to find your location, then plot geometry around that area, define the points, and then, zoom all points into view.
All of this is possible, but you showed me no code, so I'm not showing any back.
Hope you found something useful,
I want to show location in Google map using JavaScript, but when I zoom out, it shows multiple maps! Also, the map is not fixed in the browser window.
How can I fixate it to the window and force it to show just one map?
<!DOCTYPE html>
<html>
<head>
<title>My Location:</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=en'></script>
<script type='text/javascript'>
var map;
function loadMap(lat,lng) {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
//scrollwheel: false,
//disableDoubleClickZoom: true,
minZoom: 1
};
map = new google.maps.Map(document.getElementById('my_location'), myOptions);
map.streetViewControl=true;
//window.onresize = google.maps.event.trigger(map, 'resize');
}
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
</script>
</head>
<body onload='loadMap(46.518465, 6.5,45,7)'>
<div class='fd'>
<div class='cd'>
<div id='my_location' class='shadow' style='width:600px;height:260px;'></div>
</div>
</div>
</body>
</html>
Edit :
I have uploaded my page screen shot here :
one : is when my page is loaded.
two : is when I zoom out and resize the window.
three : is when I move map to scroll it.
as you see, in two I have three map ! and in three map didn't fix to its div!
Edit2:
I upload my code!
Your question is not really clear. Could you please provide further explanation of the issue?
Resizing the map on div change
From API reference:
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize') .
All you have to do is trigger this event when your window resizes e.g. window.onresize
Adding listener
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
Displaying the map div
Put this in the <head> of your document.
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#my_location{ height: 100% }
</style>
From what I can tell, you are concerned that at the highest zoom levels three copies of the map are shown? This is standard to Google Maps and basically all webmaps. If you don't want that, you could investigate making a custom map with Kartograph.
If you are trying to stop zooming, change to the following code:
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
scrollwheel: false,
disableDoubleClickZoom: true,
minZoom: 1
};
Other than that, I'm not sure what you are asking.