I have a travel blog with blogspot. I have a page which displays a map of the world with the path taken so far. To do this, I use the blogger API to retrieve the location of each post as follow:
<script src="https://www.googleapis.com/blogger/v3/blogs/3089072491354463482/posts?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
My issue is that it seems that only the last posts are retrieved and the first ones ignored. On the following link, the complete path should contain all the south of Argentina and be linked to the current path shown.
http://el-gato-lindo.blogspot.com/p/map.html
The complete code to generate the map is as follow:
<html>
<body>
<div id="content">
</div>
<div align="center" id="googleMap" style="height: 900px; width: 620px;">
</div>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>
<script>
var Lat = new Array();
var Lng = new Array();
var Place = new Array();
var TitlePost = new Array();
var UrlPost = new Array();
var DatePost = new Array();
// Get latitude/longitude from Blogger
function handleResponse(response) {
for(i=0; i< response.items.length; i++){
if(response.items[i].location != undefined){
Lat.push(response.items[i].location.lat);
Lng.push(response.items[i].location.lng);
Place.push(response.items[i].location.name);
TitlePost.push(response.items[i].title);
UrlPost.push(response.items[i].url);
DatePost.push(response.items[i].published);
}
}
}
// Distance btw two places in km
function calcDistance(p1, p2){
return (google.maps.geometry.spherical.computeDistanceBetween(p1,p2)/1000).toFixed(2);
}
// Name of months for date formatting
var m_names = new Array();
m_names.push("January");
m_names.push("February");
m_names.push("March");
m_names.push("April");
m_names.push("May");
m_names.push("June");
m_names.push("July");
m_names.push("August");
m_names.push("September");
m_names.push("October");
m_names.push("November");
m_names.push("December");
// Create the map based on locations retrieved from Blogger
function initialize(){
// Get all latitude and longitude
var pos = new Array();
// Get the path
for(var i=0; i<Lat.length; i++){
pos[i]=new google.maps.LatLng(Lat[i],Lng[i]);
}
// Get the last position
var lastpos=new google.maps.LatLng(Lat[0],Lng[0]);
// Create the map
var mapProp = {
center:lastpos,
zoom:4,
mapTypeId:google.maps.MapTypeId.TERRAIN,
navigationControl:true,
streetViewControl:false
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
// Create the path
var flightPath = new google.maps.Polyline({
path:pos,
strokeColor:"#EE0000",
strokeOpacity:0.6,
strokeWeight:7,
clickable:false,
map:map
});
// Create invisible marker at each destination
var markerPos = new Array();
var infowindow = null;
for(var i=0; i<pos.length; i++){
marker=new google.maps.Marker({
position:pos[i],
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale:5,
fillOpacity:0,
strokeOpacity:0
},
clickable:true,
map:map
});
// Click on marker: Show infowindow with articles
google.maps.event.addListener(marker, 'click', function() {
// Articles posted within a given distance from point clicked will be shown
var toldist = 2048 / Math.pow(2,map.zoom); //km
str = '<div id="infowindow_listposts">';
for(var j=0; j<pos.length; j++){
if(pos[j] === this.position){
var optplace = j;
str += "<h1>
" + Place[j] + "</h1>
<br>";
}
}
str += "<ul>";
for(var j=0; j<pos.length; j++){
var dist = calcDistance(pos[j],this.position);
if(dist < toldist){
date = new Date(DatePost[j]);
str += "<li> <h2>
<a href='" + UrlPost[j] + "'>" + TitlePost[j] + "</a> <i>(";
str += m_names[date.getMonth()] + " " + date.getDate() + ", ";
str += date.getFullYear() + ") </i></h2>
</li>
";
}
}
str += "</ul>
";
str += "<i> Articles shown were written less than ";
if(toldist >= 1)
str += toldist + "km away from ";
else
str += 1000*toldist + "m away from ";
str += Place[optplace] + ".</i>";
str += "</div>
";
if (infowindow){
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content:str
});
infowindow.open(map,this);
});
markerPos.push(marker);
}
// Create the marker of last position
var lastmarker=new google.maps.Marker({
position:lastpos,
clickable:false,
map:map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="https://www.googleapis.com/blogger/v3/blogs/3089072491354463482/posts?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
</script>
</body>
</html>
Thanks a lot for your help! I am currently travelling and it is quite difficult to solve this issue!
Nicolas
Try replacing
<script src="https://www.googleapis.com/blogger/v3/blogs/3089072491354463482/posts?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
with
<script src="https://www.googleapis.com/blogger/v3/blogs/3089072491354463482/posts/default?redirect=false&start-index=1&max-results=500?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
Related
I'm new to Google Maps API V3 and I have to use it to replace an older mapping app in one of our systems.
I've implemented a basic routing screen using the example at https://developers.google.com/maps/documentation/javascript/examples/directions-draggable
The basics are working well. The one thing that's bothering me is that I cannot find any clear discussion in the API of how to format the directions output listing. Nothing I've tried so far seems to affect it.
I'm simply doing a DirectionsRenderer.setPanel(div name) where the div has no properties other than a width of 1025px.
My chief irritations are that the directions themselves are only about 2/3 the width of the div and the text in the middle column looks like it's center justified. (The top and bottom of the list, the origin and destination addresses are the correct width.)
Is there any way to customize this or am I using too simple a model for my page?
The data used to render the directions panel is available in the result returned from the Directions Service, you can render it however you like by doing it manually.
Very simple example:
http://www.geocodezip.com/v3_directions_custom_icons_draggable.html
Custom Renderer:
function RenderCustomDirections(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var bounds = new google.maps.LatLngBounds();
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
var detailsPanel = document.getElementById("direction_details");
startLocation = new Object();
endLocation = new Object();
summaryPanel.innerHTML = "";
detailsPanel.innerHTML = '<ul>';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel.innerHTML += route.legs[i].start_address + " to ";
summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
}
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i=0;i<legs.length;i++) {
if (i == 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
startLocation.marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path;
detailsPanel.innerHTML += "<li>"+steps[j].instructions;
var dist_dur = "";
if (steps[j].distance && steps[j].distance.text) dist_dur += " "+steps[j].distance.text;
if (steps[j].duration && steps[j].duration.text) dist_dur += " "+steps[j].duration.text;
if (dist_dur != "") {
detailsPanel.innerHTML += "("+dist_dur+")<br /></li>";
} else {
detailsPanel.innerHTML += "</li>";
}
for (k=0;k<nextSegment.length;k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
detailsPanel.innerHTML += "</ul>"
polyline.setMap(map);
map.fitBounds(bounds);
endLocation.marker = createMarker(endLocation.latlng,"end",endLocation.address,"red");
// == create the initial sidebar ==
makeSidebar();
}
else alert(status);
}
I am currently working on one travel domain where I need to integrate "Trip Planner" using "Google Transit API V3". I am done with setting up map and all required option for trip planner. But here I am facing on problem.
I want to set "arrival_time" and "departure_time" in "TransitDetails" object in google API. I have created an object which returns me transit details on the route. But not as per "Departure" and "Arrival" Option passed in object.
This is what I have done in code
var directions = new google.maps.DirectionsService();
var renderer = new google.maps.DirectionsRenderer();
var startLocationAutocomplete;
var endLocationAutocomplete;
var map, transitLayer;
function initialize() {
var mapOptions = {
zoom:14,
center:new google.maps.LatLng(51.538551, -0.016633),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addDomListener(document.getElementById('go'), 'click', route);
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(35.371359, -79.319916),
new google.maps.LatLng(36.231424, -77.752991));
var autocompleteOptions = {
bounds:defaultBounds,
types:[ "locality", "political", "geocode" ]
};
startLocationAutocomplete = new google.maps.places.Autocomplete(document.getElementById('from'));
endLocationAutocomplete = new google.maps.places.Autocomplete(document.getElementById('to'));
startLocationAutocomplete.bindTo('bounds', map);
endLocationAutocomplete.bindTo('bounds', map);
transitLayer = new google.maps.TransitLayer();
var control = document.getElementById('transit-wpr');
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
google.maps.event.addDomListener(control, 'click', function () {
transitLayer.setMap(transitLayer.getMap() ? null : map);
});
addDepart();
route();
}
function addDepart() {
var departHr = document.getElementById('departHr');
var departMin = document.getElementById('departMin');
for (var hr = 1; hr < 12; hr++) {
departHr.innerHTML += '<option value = "'+hr+'">' + hr + '</option>';
}
for (var i = 0; i < 12; i++) {
for (var j = 0; j < 60; j += 5) {
var x = i < 10 ? '0' + i : i;
var y = j < 10 ? '0' + j : j;
departMin.innerHTML += '<option value = "'+y+'">' + y + '</option>';
}
}
}
function formatAMPM() {
var date = new Date();
var hours = document.getElementById('departHr').value;
var minutes = document.getElementById('departMin').value;
var ampm = document.getElementById('timeFormat').value;
/*hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;*/
console.log(hours);
if(ampm == 'pm'){
hours = 12 + parseInt(hours); }
var strTime = hours + ':' + minutes;
return strTime;
}
function route() {
var startLocation = document.getElementById('from').value;
var endLocation = document.getElementById('to').value;
var selectedMode = document.getElementById('modeOfTransportation').value;
var departure = formatAMPM();
var bits = departure.split(':');
var now = new Date();
var tzOffset = (now.getTimezoneOffset() + 60) * 60 * 1000;
var time = ($('#travelDate').val() != '') ? new Date($('#travelDate').val()) : new Date();
time.setHours(bits[0]);
time.setMinutes(bits[1]);
var ms = time.getTime() - tzOffset;
var departureTime = time;
var request = {
origin:startLocation,
destination:endLocation,
travelMode:google.maps.TravelMode[selectedMode],
provideRouteAlternatives:true,
transitOptions:{
departureTime:departureTime
}
};
console.log(request);
var panel = document.getElementById('panel');
panel.innerHTML = '';
directions.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderer.setDirections(response);
renderer.setMap(map);
renderer.setPanel(panel);
console.log(status);
} else {
renderer.setPanel(null);
alert(status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Can somebody help me out with any reference or any code hint to it correct.
Thanks
You need to do something like this
//TranDep and TranArr have a valid date or ''
if ((TranDep == '') && (TranArr == '')) var Transit = null;
else {
if ((TranDep != '') && (TranArr != ''))
var Transit = {arrivalTime: new Date(TranArr), departureTime: new Date(TranDep)}
else {
if ((TranDep == '') && (TranArr != ''))
var Transit = {arrivalTime: new Date(TranArr)}
else
var Transit = {departureTime: new Date(TranDep)}
}
}
var Dir = new google.maps.DirectionsService();
var request = {
transitOptions: Transit,
......... // the others properties
};
If you specifies a arrivalTime, the departureTime will be ignored.
Regards
Got this code, that only works when alert (markers.length); is uncommented.
When this javascript alert not shown I dont get any Markers.. Really weird!!
In the body tag I have <body onload="load()" onunload="GUnload()">
Previoslly the load() function is called and other functions :
function showAddress(address) {
if (geocoder) {//+', '+init_street
geocoder.getLatLng(address,
function(point) {
if (!point) {
document.getElementById("place").value="not found";
//alert(address + " not found");
} else {
// document.getElementById("place").value=point.y.toFixed(4) + "," + point.x.toFixed(4);
map.setCenter(point, 16);
marker.setPoint(point);
//marker.openInfoWindowHtml(address);
}
}
);
}
}
//from a point returns and address!
function showPointAddress(response) {
if (!response || response.Status.code != 200) {//not found
//alert("Status Code:" + response.Status.code);
document.getElementById("place").value="not found";
}
else {//found
map.setCenter(marker.getPoint(), 16);
place = response.Placemark[0];
document.getElementById("place").value=place.address;
//document.getElementById("place").value=marker.getPoint().toUrlValue();
}
}
// Creates a marker at the given point with the given number icon and text
function createMarker(p,text) {
var marker = new GMarker(p);
if (text!=""){
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);});
}
return marker;
}
` var geocoder = null;`
` var map = null;`
function load() {//loading the map
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.enableScrollWheelZoom();
geocoder = new GClientGeocoder();
if (init_street!=""){
geocoder.getLatLng(init_street,function(point) {//set center point in map
if (point){
map.setCenter(point, zoom);
map.addOverlay(createMarker(point,init_street));
map.openInfoWindow(point,init_street);
}
});
}
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
}
}`
function(data, responseCode) {
if(responseCode == 200) {
var texts = [];
var addresses = [];
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("item");
alert (markers.length);
for (var i = 0; i < markers.length; i++) {
var address=markers[i].getElementsByTagName('address').item(0).childNodes.item(0).nodeValue;
if (address!=null){
//alert (address);
var title=markers[i].getElementsByTagName('title').item(0).childNodes.item(0).nodeValue;
var link=markers[i].getElementsByTagName('link').item(0).childNodes.item(0).nodeValue;
var desc=markers[i].getElementsByTagName('description').item(0).childNodes.item(0).nodeValue;
desc=desc.substr(0,220);//limit
addresses.push(address);
texts.push("<div style='width: 200px'><a target='_blank' href='" +link+"'>"+title+"</a><br />"+desc+"</div>");
}//if
}//for
for (var i = 0; i < addresses.length; i++) {
geocoder.getLatLng(addresses[i], function (current) {
return function(point) {
if (point) map.addOverlay(createMarker(point,texts[current]));
}
}(i));
}
}//if });
I Understand the issue of needing a callback function to load the markers, but Im lost..
Any help apreciated!! ;)
Thx in advanced!!
This usually happens when fetching data with Ajax or similar. Basically when you fetch the data you need to utilize a callback function to wait for the data. If you don't there is no data to execute on. However, if you pause the execution with a alert() the data will have been fetched in the background.
Think of it as the waiting for the DOM to load before executing Javascript on the page.
I can't give you a better answer as you have not included the code that is calling the function you included.
I followed the example code line by line from:
How do I integrate Salesforce with Google Maps?
I am not receiving any errors but my Map is blank. The map displays the zoom and position toggle but nothing else.
Any ideas on why?
Here is my Controller Code and Page Code Below
public class mapController2 {
public String address {get;set;}
private List<Account> accounts;
public void find() {
// Normal, ugly query.
/* address = 'USA';
String addr = '%' + address + '%';
accounts = [SELECT Id, Name, BillingStreet, BillingCity, BillingCountry FROM Account
//WHERE Name LIKE :addr OR BillingStreet LIKE :addr OR BillingCity LIKE :addr OR BillingCountry LIKE :addr];
WHERE BillingCountry LIKE :addr];*/
// address = 'Austin';
String addr = '*' + address + '*';
// Or maybe a bit better full-text search query.
List<List<SObject>> searchList = [FIND :addr IN ALL FIELDS RETURNING
Account (Id, Name, BillingStreet, BillingCity, BillingState, BillingCountry)];
accounts = (List<Account>)searchList[0];
}
public List<Account> getAccounts() {
return accounts;
}
}
Page Code
<apex:page controller="mapController2" tabStyle="Account">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
#map {
height:350px;
}
</style>
</head>
<apex:form >
<apex:pageBlock title="Search by Address">
<apex:inputText value="{!address}"/>
<apex:commandButton value="Search" action="{!find}"/>
<p>Examples: "USA", "Singapore", "Uni", "(336) 222-7000".
Any text data (free text, not picklists, checkboxes etc.) will do.
</p>
</apex:pageBlock>
<apex:pageBlock title="Matching Accounts" rendered="{!address != null}">
<apex:pageBlockTable value="{!accounts}" var="account" id="accountTable">
<apex:column >
<apex:facet name="header"><b>Name</b></apex:facet>
<apex:outputLink value="../{!account.Id}">{!account.Name}</apex:outputLink>
</apex:column>
<apex:column >
<apex:facet name="header"><b>Address</b></apex:facet>
{!account.BillingStreet}, {!account.BillingCity}, {!account.BillingCountry}
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
<apex:pageBlock title="Map" rendered="{!address != null}">
<div id="log"></div>
<p>Tip: hover mouse over marker to see the Account name. Click to show the baloon.</p>
<div id="map">Placeholder - map will be created here.</div>
<script type="text/javascript">
// First we need to extract Account data (name and address) from HTML into JavaScript variables.
var names = new Array();
var addresses = new Array();
var htmlTable = document.getElementById('j_id0:j_id2:j_id7:accountTable').getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for (var i = 0; i < htmlTable.length; ++i) {
names.push(htmlTable[i].getElementsByTagName("td")[0]);
// We need to sanitize addresses a bit (remove newlines and extra spaces).
var address = htmlTable[i].getElementsByTagName("td")[1].innerHTML;
addresses.push(address.replace(/\n/g, "").replace(/^\s+/,"").replace(/\s+$/,""));
}
var coordinates = new Array(); // Array of latitude/longitude coordinates.
var markers = new Array(); // Red things we pin to the map.
var baloons = new Array(); // Comic-like baloons that can float over markers.
var counter = 0;
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
if(addresses.length > 0) {
geocodeOneAddress();
}
function geocodeOneAddress(){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: addresses[counter]}, processGeocodingResults);
}
function processGeocodingResults(results, status) {
++counter;
if (status == google.maps.GeocoderStatus.OK) {
coordinates.push(results[0].geometry.location);
} else {
logError(addresses[counter] + " could not be found, reason: " + status);
}
if(counter == addresses.length) {
finalizeDrawingMap();
} else {
geocodeOneAddress();
}
}
function finalizeDrawingMap() {
// Compute min/max latitude and longitude so we know where is the best place to center map & zoom.
var minLat = coordinates[0].b;
var maxLat = coordinates[0].b;
var minLong = coordinates[0].c;
var maxLong = coordinates[0].c;
for(i=0;i < coordinates.length; i++){
markers.push(new google.maps.Marker({ position: coordinates[i], map: map, title: names[i].getElementsByTagName("a")[0].innerHTML, zIndex:i}));
baloons.push(new google.maps.InfoWindow({content: '<b>'+names[i].innerHTML + '</b><br/>' + addresses[i]}));
google.maps.event.addListener(markers[i], 'click', function() {
baloons[this.zIndex].open(map,this);
});
minLat = Math.min(minLat, coordinates[i].b);
maxLat = Math.max(maxLat, coordinates[i].b);
minLong = Math.min(minLong, coordinates[i].c);
maxLong = Math.max(maxLong, coordinates[i].c);
}
map.setCenter(new google.maps.LatLng(minLat + (maxLat-minLat) / 2, minLong + (maxLong-minLong) / 2));
// All that is left is to possibly change the zoom. Let us compute the size of our rectangle.
// This is just a rough indication calculation of size of rectangle that covers all addresses.
var size = (maxLat-minLat) * (maxLong-minLong);
var zoom = 13;
if(size > 7100) {
zoom = 2;
}
else if(size > 6000) {
zoom = 3;
}
else if(size > 550) {
zoom = 4;
}
else if(size > 20) {
zoom = 6;
}
else if(size > 0.12) {
zoom = 9;
}
map.setZoom(zoom);
}
function logError(msg) {
var pTag = document.createElement("p");
pTag.innerHTML = msg;
document.getElementById('log').appendChild(pTag);
}
</script>
</apex:pageBlock>
</apex:form>
</apex:page>
Ya even I was getting a blank map but try to do
https://c.na3.visual.force.com/apex/map?id=0015000000UsQZR
Make sure you enter a valid account id to use.
<apex:page standardController="Account">
<script src="http://maps.google.com/maps?file=api">
</script>
<script type="text/javascript">
var map = null;
var geocoder = null;
var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";
function initialize() {
if(GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("MyMap"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl3D());
geocoder = new GClientGeocoder();
geocoder.getLatLng(
address,
function(point) {
if (!point) {
document.getElementById("MyMap").innerHTML = address + " not found";
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.bindInfoWindowHtml("Account Name : <b><i> {!Account.Name} </i></b>
Address : "+address);
}
}
);
}
}
</script>
<div id="MyMap" style="width:100%;height:300px"></div>
<script>
initialize() ;
</script>
</apex:page>
Hope this helps
Thanks
tosha
And use the code given as:
src="http://maps.google.com/maps/api/js?sensor=false"
Use
https
not
http
It will definately be blank in firefox or chrome if using http and not https. Try https.
I've created a Google Maps overlay, but for some reason the zoom slider in the top-left of the map has stopped working. Have been trying to pick apart the code to fix it, but can't seem to find what is broken. Can someone have a look to see what I'm missing?
http://www.ucl.ac.uk/study/virtualtours/
My code is here:
<script type="text/javascript">
google.load("maps", "2");
google.load("jquery", "1.4.2");
var map;
var camera;
var side_bar_html = "";
var gmarkers = [];
function TileToQuadKey ( tx, ty, zl){
var quad = "";
for (var i = zl; i > 0; i--) {
var mask = 1 << (i - 1);
var cell = 0;
if ((tx & mask) != 0) cell++;
if ((ty & mask) != 0) cell += 2;
quad += cell;
}
return quad;
}
var uclvtTiles = function (a,b) {
var f = "http://www.ucl.ac.uk/prosp-students/access/virtual-tour/tourlayers/" + TileToQuadKey(a.x,a.y,b) + ".png";
return f;
}
function createUclVTSatMapType() {
var uclvtHybridLayer = new Array();
uclvtHybridLayer[0] = G_NORMAL_MAP.getTileLayers()[0];
uclvtHybridLayer[1] = new GTileLayer(new GCopyrightCollection('') , 17, 17);
uclvtHybridLayer[1].getTileUrl = uclvtTiles;
uclvtHybridLayer[1].getCopyright = function(a,b) {return "University College London, 2010";};
uclvtHybridLayer[1].getOpacity = function () {return 0.97;};//opacity of the non transparent part
if(navigator.userAgent.indexOf("MSIE") == -1) {
uclvtHybridLayer[1].isPng = function() {return true;};
}
var uclvtSatMap = new GMapType(
uclvtHybridLayer,
G_NORMAL_MAP.getProjection(),
'UCL Map',
{errorMessage:"", alt:"Show imagery with UCL Map"});
uclvtSatMap.getTextColor = function() {return "#000000";};
return uclvtSatMap;
}
function myclick(i) {
GEvent.trigger(gmarkers[i], 'click');
}
function addMarker(point, title, video, details) {
var marker = new GMarker(point, {title: title, icon:camera});
GEvent.addListener(marker, "click", function() {
if (details) {
marker.openInfoWindowTabsHtml([new GInfoWindowTab("Video", video),
new GInfoWindowTab("More", details)]);
} else {
marker.openInfoWindowHtml(video);
}
});
var id = gmarkers.length;
gmarkers.push(marker);
map.addOverlay(marker);
return id;
}
function flashMovieHTML(title, file) {
return '<div style="width:335px; height:260px">' +
'<b>' + title + '</b>' +
'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="325" height="244" ' +
'id="' + title + '" ' +
'title="' + title + '">' +
'<param name="movie" value="http://www.ucl.ac.uk/prosp-students/access/virtual-tour/' + file + '" />' +
'<param name="quality" value="high" />' +
'<param name="wmode" value="opaque" />' +
'<param name="swfversion" value="8.0.35.0" />' +
'<embed src="http://www.ucl.ac.uk/prosp-students/access/virtual-tour/' + file + '" ' +
'quality="high" ' +
'width="325" ' +
'height="244" ' +
'name="' + title + '" ' +
'type="application/x-shockwave-flash" ' +
'pluginspage="http://www.macromedia.com/go/getflashplayer">' +
'</embed>' +
'</object>' +
'</div>';
}
function addMarkersToMap() {
GDownloadUrl('campus.xml', function(doc) {
var xmlDoc = GXml.parse(doc);
var locations = xmlDoc.documentElement.getElementsByTagName("location");
var currentCategory = "";
for (var i = 0; i < locations.length; i++) {
var lat = parseFloat(locations[i].getAttribute("lat"));
var lng = parseFloat(locations[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var title = locations[i].getAttribute("title");
var menu = locations[i].getAttribute("menu");
var video = locations[i].getAttribute("video");
var category = locations[i].getAttribute("category");
var details = locations[i].childNodes.length == 0 ? null :
'<div style="width:335px; height:260px">' +
locations[i].childNodes[0].nodeValue +
'</div>';
var id = addMarker(point, title, flashMovieHTML(title, video), details);
if (category != currentCategory) {
if (id > 0) {
side_bar_html += '</ul></div></div>';
}
side_bar_html += '<div class="collapsable">';
side_bar_html += '<h4 class="toggleCollapsableContent">' + category + '</h4>';
side_bar_html += '<div class="collapsableContent"><ul>';
}
side_bar_html += '<li><a href="javascript:myclick(' + id + ')">' + menu + '<\/a></li>';
currentCategory = category;
}
side_bar_html += '</ul></div></div>';
document.getElementById("right").innerHTML = side_bar_html;
$("h4.toggleCollapsableContent:gt(0)")
.addClass('closed')
.next('.collapsableContent').hide();
$("h4.toggleCollapsableContent").click(function () {
if ($(this).next($(".collapsableContent")).is(":hidden")) {
$(this).next($(".collapsableContent")).slideDown("fast");
$(this).removeClass("closed");
} else {
$(this).next($(".collapsableContent")).slideUp("fast");
$(this).addClass("closed");
}
});
});
}
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mapDiv"));
map.setCenter(new GLatLng(51.52484592590448, -0.13345599174499512), 17);
map.setUIToDefault();
var uclvtSatMapType = createUclVTSatMapType()
map.addMapType(uclvtSatMapType);
map.setMapType(uclvtSatMapType);
camera = new GIcon(G_DEFAULT_ICON);
camera.image = "ucl-video.png";
camera.iconSize = new GSize(32,37);
camera.iconAnchor = new GPoint(16,35);
camera.infoWindowAnchor = new GPoint(16,2);
addMarkersToMap();
}
}
google.setOnLoadCallback(initialize);
Cheers,
G
The div that holds this image
http://www.ucl.ac.uk/prosp-students/access/virtual-tour/campus-map-key.png
is positioned absolutely above the map and it blocking access to everything underneath it.
This may help you:
#map img{max-width: inherit;}