Kinda of new to Google mashups. I have an KML on our Webserver (http://www.madisonareampo.org/maps/BRT_National.kmz) to draw on Google Maps.
I have a Google Maps mashup where I want an infowindow to display the contents of the KML description field through a click event. The KML file was exported from a geodatabase using ArcGIS.
Nothing is being returned when I click on a marker in the KML file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvkXCNOcIGLKZVgFtIykSQEbEk0db1XxY&sensor=false">
</script>
<script>
function initialize() {
var BRT = new google.maps.LatLng(40.380028, -93.440917);
var mapOptions = {
center: BRT,
zoom: 3,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var layer= new google.maps.KmlLayer('http://www.madisonareampo.org/maps/BRT_National.kmz',
{ suppressInfoWindows: true,
map: map });
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.featureData.description);
});
function showInContentWindow(text) {
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content
})
}
var panoramaOptions = {
position: BRT,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 650px; height: 400px"></div>
<div id="pano" style="position:absolute; left:660px; top: 8px; width: 650px; height: 400px;"></div>
</body>
</html>
InfoWindows needs a position attribute and you have to call open(map) to bind it to the map. Here's a working version of your code :
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position
})
infowindow.open(map);
}
Related
I have the following simple code that will display the google street view on a webpage for me.
var panoramaOptions = {
position: myLatlng,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
The only issue I am having that if i'm searching for somewhere like Malta there is no street view available. This is leaving a big ugly blank space on my webpage. Is there a way I can detect if street view is available at a certain location and if it's not stop the map from generating?
Thanks in advance
Yes. Try and get a Street View for your location, and check its status. Here's how I do it:
<!DOCTYPE html>
<html>
<head>
<title>Streetview</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#streetView { height: 100%; width: 100%; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
function createStreetMap(mapCanvasID, lat, lng)
{
//create a google latLng object
var streetViewLocation = new google.maps.LatLng(lat, lng);
var panorama;
//once the document is loaded, see if google has a streetview image within 50 meters of the given location, and load that panorama
var streetview = new google.maps.StreetViewService();
streetview.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
if (status == 'OK') {
//google has a streetview image for this location, so attach it to the streetview div
var panoramaOptions = {
pano: data.location.pano,
addressControl: false,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById(mapCanvasID), panoramaOptions);
}
else{
//no google streetview image for this location, so hide the streetview div
$('#' + mapCanvasID).parent().hide();
}
});
return panorama;
}
$(document).ready(function() {
var myPano = createStreetMap('streetView', 0, 0);
});
</script>
</head>
<body>
<div>
<h2>Street View</h2>
<div id="streetView"></div>
</div>
</body>
</html>
Hello and thanks in advance. The following modified sample google code creates markers upon left mouse clicks, and adds those markers to an array. That part works fine. I have tried to add a second event handler that deletes a marker if there is a right click on it. I've tried a lot of variations without success. It is my understanding that the use of marker.setMap(null) would set the associated array element to null, and remove the marker from the display. Thanks again!
<!DOCTYPE html>
<html>
<head>
<title>Marker Test</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#map-canvas, #map_canvas {
height: 650px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var markers = [];
function initialize() {
var NY = new google.maps.LatLng(40.739112,-73.785848);
var mapOptions = {
zoom: 16,
center: NY,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
google.maps.event.addListener(map, 'rightclick', function(event) {
marker.setMap(null);
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You want the 'rightclick' event listener on the marker, not the map. Put it in the addMarker function:
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(event) {
marker.setMap(null);
});
markers.push(marker);
}
Note: this will remove the marker from the map, but won't remove it from the markers array.
Remove the one on the map, delete these lines:
google.maps.event.addListener(map, 'rightclick', function(event) {
marker.setMap(null);
});
I want to show user current location or approximate location on google maps in my web site using asp.net c#.Is it possible??? If it is kindly help me.I saw many tutorials but fail.
First you need to get google maps API key for your localhost, this link provides details on how to do that:
http://www.aspdotnet-suresh.com/2013/01/generate-google-maps-api-key-for.html
Second in your default.aspx page do this:
script tags:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
</script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
alert("Geo Location is not supported on your current browser!");
}
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var city=position.coords.locality;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: "lat: " + lat + " long: " + long
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:"+lat+"<br /> Longitude:"+long+"" });
infowindow.open(map, marker);
}
</script>
in body tag simply include a empty div:
<div id="map_canvas" style="width: 800px; height: 500px"></div>
css:
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
this is the result you should get:
Tutorial: http://www.aspdotnet-suresh.com/2013/01/show-user-current-location-on-google.html
This is a drop down Div - which works with everything except GoogleMap.
I get half the map showing or maybe a 1/4 of it... When I get rid of the div's all works fine... Or is there a workaround without div's? Ideas... I tried declaring table, p etc... No luck...
Javascript Drop Down Code and Div calls
<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>
<div class=catlist>
<table border=0 cellpadding=4>
<tr>
<td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td>
<td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS
Map</b></a></td>
</tr></table>
</div>
<div class="qlist" id="ed" style="display:none;">
<div id="map" style="width: 500px; height: 250px;"></div>
</div>
Adding the Google Javascript...
This is the actual Google Maps Javascript...
Cold Fusion Plots the # markers...
This works fine outside of divs...
Code suggested above works to display the correct map interface...
But the centering of the plot is not working...
And marker shows at top left corner with above code provided...
<div id="map" style="width: 500px; height: 250px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
</script>
<script type="text/javascript">
var locations = [
["#bsname#", #gpslat#, #gpslong#, #busid#],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(#gpslat#, #gpslong#),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
The changes I made were:
triggering a resize when the div is expanded
centering the map after the resize
making map and locations variables global.
The jsfiddle is here:
http://jsfiddle.net/Mgp9z/9
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
// CHANGED locations and map now global so they refer to the same thing in both initialize and showElement
var locations = [
["a", 40.2, -88.8, "k"],
];
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
// CHANGED
zoom: 10,
center: new google.maps.LatLng(40.2, -88.8),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
// *** add the trigger here ***
google.maps.event.trigger(map, 'resize');
var mylat=locations[0][1];
var mylng=locations[0][2];
map.setCenter(new google.maps.LatLng(mylat,mylng));
} else {
myLayer.style.display="none";
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class=catlist>
<table border=0 cellpadding=4>
<tr>
Lat: <input type="text" id="mylat" value="40.2">
Lng: <input type="text" id="mylng" value="-88.8">
<!-- <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td> -->
<td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS
Map</b></a></td>
</tr></table>
</div>
<div class="qlist" id="ed" style="display:none;">
<div id="map" style="width: 500px; height: 250px;"></div>
</div>
</body>
</html>
Making the map resize after you show the div should work:
From the docs: "Developers should trigger this event on the map when the div changes size:" google.maps.event.trigger(map, 'resize') .
EDIT - I'll be more specific, please try again
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
// *** add the trigger here ***
google.maps.event.trigger(map, 'resize')
} else {
myLayer.style.display="none";
}
}
Demo: http://jsfiddle.net/Mgp9z/
I need help to create a sidebar. I have it partially working, but there are 2 problems to solve. First, the sidebar only shows the last marker information. I may not have placed some of the sidebar coding in its proper place. Second, (which may be part of the first problem), all the icons appear when using Firefox, but when using IE8 all the icons except the last icon appears. To view the map and code, first go to http://www.askdata.net/propmap/mapdata.php and do the demo (paste addresses into text area), then the map page will be displayed. Thanks again. The code also follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<h1>'Comparables Map'</h1><!DOCTYPE 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>Comparables Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
Subject: {
icon: 'http://askdata.net/compmap/mapicons/sub.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp1: {
icon: 'http://askdata.net/compmap/mapicons/c1.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp2: {
icon: 'http://askdata.net/compmap/mapicons/c2.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp3: {
icon: 'http://askdata.net/compmap/mapicons/c3.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp4: {
icon: 'http://askdata.net/compmap/mapicons/c4.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
Comp6: {
icon: 'http://askdata.net/compmap/mapicons/c6.png',
//shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(41.95, -87.65),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + type + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true,
icon: icon.icon
//shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(41, -87), 4);
return;
}
var sidebarEntry = createSidebarEntry(marker, type, address);
sidebar.appendChild(sidebarEntry);
}
});
function createSidebarEntry(marker, type, address) {
var div = document.createElement('div');
var html = '<b>' + type + '</b>' + address;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'click', function() {
google.maps.event.trigger(marker, 'click');
});
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<br/>
<br/>
<div style="width:1200px; font-family:Arial,
sans-serif; font-size:11px; border:1px solid black">
<table>
<tbody>
<tr id="cm_mapTR">
<td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 700px; font-size: 11px; color: #000"></div>
</td>
<td> <div id="map" style="overflow: hidden; width: 1000px; height: 700px"></div> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
IE doesn't like trailing commas at the end of a structure, e.g. the comma after the icon here:
Comp5: {
icon: 'http://askdata.net/compmap/mapicons/c5.png',
}
You're mixing Google Maps API 2 and 3 code. e.g. you declare latlng objects using API 3:
center: new google.maps.LatLng(41.95, -87.65)
but then you use API 2 here:
map.setCenter(new GLatLng(41, -87), 4);
Here is your problem: sidebar.innerHTML = '';
Since it is within the loop, every time it loops, it deletes the prior side bar entry.
Place it fight after function load() { -Outside the loop AND within Load().
Use document.getElementById('sidebar').innerHTML = '';
Also, you have to do something about your customIcons
You can change them to something like this
Subject: { icon: 'http://askdata.net/compmap/mapicons/sub.png' }
And you are done!
EXAMPLE
function load() {
document.getElementById('sidebar').innerHTML = '';
var map = new google.maps.Map(document.getElementById("map"), {
//rest of the code goes here
Also, it might be a good idea to replace this code with CSS:
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
google.maps.event.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
google.maps.event.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
CSS option:
#sidebar {
background-color: white;
}
#sidebar div {
cursor: pointer;
margin-bottom: 5px;
}
#sidebar div:hover {
background-color: #eee;
}