I've created a Google Map where markers are loaded via Json. I have been doing a lot of research to load additional markers when the map is dragged, but the function onClickCallback does not get fired. Would you please help me?
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQmgDjepa9e-ce16YlwjKBD9gJRfnQUEI&sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.ui.map.js"></script>
<style type="text/css">
#map {
width: 800px;
height: 600px;
}
#latlng-control {
background: #ffc;
border: 1px solid #676767;
font-family: arial, helvetica, sans-serif;
font-size: 0.7em;
padding: 2px 4px;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
var map;
var infoWindow;
var bounds;
var markers = new Array();
var markers = [];
var lat = 47.2081;
var lon = 10.14175;
var zoom = 11;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(lat, lon),
zoom: zoom,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, mapOptions);
// Define an info window on the map.
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'tilesloaded', function () {
onClickCallback(map);
});
google.maps.event.addListener(map, "dragend", function() {
var bounds = this.getBounds();
onClickCallback(map);
});
}
function onClickCallback(map) {
var bounds = map.getBounds();
// clearOverlays();
$.getJSON( 'http://skiweather.eu/gmap4/markers/index.php', {
swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(),
neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()}, function(data) {
$.each( data.markers, function(i, marker) {
// Define Marker properties
var image = new google.maps.MarkerImage(marker.smallimg,
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(42, 42),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(18, 42)
);
$('#map').gmap('addMarker', { 'id' : marker.id,
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'icon' : image,
'bounds': true
}).click(function() {
$('#map').gmap('openInfoWindow', { 'content': '<h2>' + marker.loc + '</h2><img src="' + marker.smallimg + '" class="my-map-marker" />'
}, this);
});
});
});
return false;
}
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
</head>
<body>
<div id="map" style="width:500px;height:500px;"></div>
<div id="loading">
</div>
</body>
</html>
I think if you changed it from 'dragend' to 'idle' it would serve two purposes. It would run the search for thumbnails after a zoom event and a pan event.
bounds are updated for both pan and zoom?
See here !Updated
Related
I have two KML layers that load onto a map once clicked:
<button id="button2" onclick="myFunctiongr(); loadKmlLayer(); initialize()">Submit</button>
<script>
src = "https://github.com/YourCity/hello-world/blob/readme-edits/"+name+".kmz?raw=true"}
srca = " https://www.dropbox.com/s/5g0tytd1ur7my67/v7.kmz?dl=1"
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(51.50275896, -0.11535645),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
loadKmlLayer(src, map);
loadKmlLayera(srca, map);
}
This code works and loads both layers onto the map, however I would like the loadKmlLayer(src, map) to load first but it does not. Strangely if I refresh the page and try again it does! I cannot figure out why and how to make it load on top the first time.
The srca layer is larger than the src layer so I was thinking the size may be influencing it. Any help would be good!
(The 'LoadkmlLayer' & 'LoadkmlLayera' are functions defined elsewhere in my code. )
Use zIndex. The layer with the lowest value of zIndex goes on the bottom, the layer with the largest value goes on the top.
code snippet:
var name = "bcg";
var src = "https://github.com/YourCity/hello-world/blob/readme-edits/" + name + ".kmz?raw=true"
var srca = "https://www.dropbox.com/s/5g0tytd1ur7my67/v7.kmz?dl=1"
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(51.50275896, -0.11535645),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
loadKmlLayer(src, map, 1);
loadKmlLayer(srca, map, 0);
}
google.maps.event.addDomListener(window, "load", initialize);
function loadKmlLayer(src, map, zIndex) {
var ctaLayer = new google.maps.KmlLayer({
url: src,
zIndex: zIndex,
map: map
});
google.maps.event.addListener(ctaLayer, 'status_changed', function() {
document.getElementById('status').innerHTML += "src=" + src + " status=" + ctaLayer.getStatus() + "<br>";
})
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button id="button2" onclick="myFunctiongr(); loadKmlLayer(); initialize()">Submit</button>
<div id="status"></div>
<div id="map"></div>
I have a map where I call 150 locations through a GeoJSON file and each one is represented by a custom image (22px,17px). The issue comes when zooming in (after zoom 17) where these markers look relatively tiny. I would like to know is there a way to ensure getting the same size on my icons whenever I zoom in.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false &libraries=visualization"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 13,
scrollwheel: true,
panControl: true,
zoomControl: true,
scaleControl: false,
disableDefaultUI: false,
center: new google.maps.LatLng(19.043516, -98.198232),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var script = document.createElement('script');
script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
document.getElementsByTagName('head')[0].appendChild(script);
map.data.setStyle(function(feature) {
var mag = 3;
var grd = feature.getProperty('Grd');
var ctgData = feature.getProperty('Ctg');
var ctgColor = {
"Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
"Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
"Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
};
return ({
icon: ctgColor[ctgData]
});
});
}
function eqfeed_callback(results) {
map.data.addGeoJson(results);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I have seen some solutions here but I don't know how to apply it when calling a GeoJSON file from outside. (How to set Google maps marker size dynamically)
You can scale the existing markers up as is done in the question you reference
google.maps.event.addListener(map, 'zoom_changed', function() {
map.data.setStyle(function(feature) {
var mag = 3;
var grd = feature.getProperty('Grd');
var ctgData = feature.getProperty('Ctg');
var ctgColor = {
"Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
"Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
"Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
};
var size;
var zoom = map.getZoom();
if (zoom > 13) {
size = new google.maps.Size(44,34);
} else {
size = new google.maps.Size(22,17);
}
return ({
icon: {url: ctgColor[ctgData],
size: size,
scaledSize: size}
});
});
})
They will get fuzzy, you are better off creating separate markers for the higher zoom levels.
code snippet:
var map;
function initialize() {
var mapOptions = {
zoom: 13,
scrollwheel: true,
panControl: true,
zoomControl: true,
scaleControl: false,
disableDefaultUI: false,
center: new google.maps.LatLng(19.043516, -98.198232),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var script = document.createElement('script');
script.src = 'https://storage.googleapis.com/operations_poligone/datos/Test_JSON11.geojson';
document.getElementsByTagName('head')[0].appendChild(script);
map.data.setStyle(function(feature) {
var mag = 3;
var grd = feature.getProperty('Grd');
var ctgData = feature.getProperty('Ctg');
var ctgColor = {
"Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
"Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
"Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
};
return ({
icon: ctgColor[ctgData]
});
});
google.maps.event.addListener(map, 'zoom_changed', function() {
map.data.setStyle(function(feature) {
var mag = 3;
var grd = feature.getProperty('Grd');
var ctgData = feature.getProperty('Ctg');
var ctgColor = {
"Seguridad": "https://storage.googleapis.com/operations_poligone/iconos/Safety_T02.png",
"Espacio": "https://storage.googleapis.com/operations_poligone/iconos/Neat_T02.png",
"Iluminacion": "https://storage.googleapis.com/operations_poligone/iconos/Lightning_T03.png"
};
var size;
var zoom = map.getZoom();
document.getElementById("zoom").innerHTML = zoom;
if (zoom > 13) {
size = new google.maps.Size(44, 34);
} else {
size = new google.maps.Size(22, 17);
}
return ({
icon: {
url: ctgColor[ctgData],
size: size,
scaledSize: size
}
});
});
})
}
function eqfeed_callback(results) {
map.data.addGeoJson(results);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="zoom"></div>
<div id="map-canvas"></div>
We are using Google street view Api Version 3 for our product. We are facing an issue when the street view is loading for the first time. The view is breaking in to pieces/pix, where as when we see the same view in Google maps it is not breaking but the imaginary is showing Blur effect. How we can give the same blur effect in our product also?`
Click this link to see the breaking effect: http://jsfiddle.net/godwinthaya/4wfLkc3t/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//marker
var busMarker = new google.maps.Marker({
position: fenway,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas'), panoramaOptions);
map.setStreetView(fenway);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
google.maps.event.addListener(busMarker, 'click', function() {
alert("Hai");
infowindow.open(map,busMarker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!--<div id="map-canvas" style="width: 400px; height: 300px"></div> -->
<div id="map-canvas" style="position:absolute; width: 1000px; height: 600px;"></div>
</body>
</html>
Are you calling the events correctly? What you are asking could most likely be a part of the API but there is no documentation or reference as to implement the "blurred effect". Although, if you call all the events correctly, it should give you the default behavior. Here's the sample code for the different events:
var cafe = new google.maps.LatLng(37.869085, -122.254775);
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: 270,
pitch: 0
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while (linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
}
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition() + '';
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
});
}
google.maps.event.addDomListener(window, 'load', initialize);
:
I have a problem with Google Maps info windows. I have 2 markers and I want to open both info windows by default. But I can't figure out how to do it.
Here is my code:
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key>&sensor=false"></script>
<script type="text/javascript">
var locations = [
['loan 1', 46.166621, 8.853315, '<div style="width:250px">text info 1'],
['loan 2', 46.173000, 8.856315, '<div style="width:250px">text info 2'],
];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(46.166621, 8.853315),
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("default"), myOptions);
setMarkers(map,locations);
}
function setMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length; i++) {
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: loan , position: latlngset
});
map.setCenter(marker.getPosition())
var content = add
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
I tried adding infowindow.open(map,marker); in various place but stil don't work.
Trigger the click-event for the markers.
Put this at the end of the for-loop:
google.maps.event.trigger(marker,'click',{});
working fiddle
Dear all i am a newbie to Google Maps API. I have a parsed a KML layer in Google Maps API using GeoXML3. Now how do i fetch placement marker value(Name of the place) of KML in Google Maps API onclick. Like when a kml layer gets loaded on google maps and i am clicking on any marker i should be able to fetch the placement value of the marker in an alert box. Please find the code that helps me parse a kml on google maps api. Please guide.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>KML Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize()
{
var chicago = new google.maps.LatLng(75.602836700999987,32.261890444473394);
var myOptions = {
zoom: 2,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//var transitLayer = new google.maps.TransitLayer();
//transitLayer.setMap(map);
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml.parse('kmload.kml');
var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml1.parse('lines.kml');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Is this what you are looking for? I have added the alert in the onclick function which displays me the name of the placemark in the alert box. Please check and let me know if you find any issues.
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<title>KML Placement Value Test</title>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
padding: 0;
}
#panel {
top: 5px;
left: 85%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
.infowindow * {font-size: 90%; margin: 0}
</style>
<script type="text/javascript" >
geocoder = new google.maps.Geocoder();
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var marker = [];
var polyline;
function initialize()
{
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
var test;
var lat = 37.422104808;
var lng = -122.0838851;
var zoom = 18;
var maptype = google.maps.MapTypeId.ROADMAP;
if (!isNaN(lat) && !isNaN(lng))
{
myLatLng = new google.maps.LatLng(lat, lng);
}
var myOptions = {zoom: zoom,center: myLatLng,mapTypeId: maptype};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({map: map,infoWindow: infowindow,singleInfoWindow: true,zoom: myGeoXml3Zoom, markerOptions: {optimized: false},createMarker: createMarker});
geoXml.parse('test.kml');
};
var createMarker = function (placemark, doc) {
var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
map: geoXml.options.map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
});
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
doc.markers.push(marker);
}
// Set up and create the infowindow if it is not suppressed
if (!geoXml.options.suppressInfoWindows) {
var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div></div>',
pixelOffset: new google.maps.Size(0, 2)
});
if (geoXml.options.infoWindow) {
marker.infoWindow = geoXml.options.infoWindow;
} else {
marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
}
marker.infoWindowOptions = infoWindowOptions;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function()
{
alert(placemark.name);
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
}
placemark.marker = marker;
return marker;
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float: left; width: 70%; height: 100%;"></div>
</body>
</html>
If you use the "afterParse" function to add click listeners to the markers, you can access the data (if you use function closure), example accessing the name:
// assign "useTheData" as the after parse function
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true, afterParse: useTheData});
geoXml.parse('kmload.kml');
// function to retain closure on the placemark and associated text
function bindPlacemark(placemark, text) {
google.maps.event.addListener(placemark,"click", function() {alert(text)});
}
// "afterParse" function, adds click listener to each placemark to "alert" the name
function useTheData(doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i].polygon || doc[0].placemarks[i].marker || doc[0].placemarks[i].polyline;
bindPlacemark(placemark, doc[0].placemarks[i].name);
}
};
working example
hope it can help ;)
/**
* map
*/
var myLatlng = new google.maps.LatLng(39.980278, 4.049835);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('mapa'), myOptions);
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, 'click', function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
});
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, 'click', function(){
infoWindow.close();
});
function openMarker(i){
google.maps.event.trigger(markerArray[i],'click');
};
/**
*markers
*/
makeMarker({
position: new google.maps.LatLng(39.943962, 3.891220),
title: 'Title',
content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>'
});
openMarker(0);