Leaflet error when zoom after close popup - popup

I created a map and added markers on it in salesforce lightning component ,
issue is:
click on marker >> click on map (this close the popup) >> zoom in and out >> this error displayed for each zoom step:
Uncaught TypeError: Cannot read property '_latLngToNewLayerPoint' of
null throws at /resource/1498411629000/leaflet/leaflet.js:9:10763
this is the code in component javascript helper:
({
drawMap: function(component,map){
var mapElement = component.find("map").getElement();
map = L.map(mapElement).setView([35.232, 40.5656], 12);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles © Esri'
}).addTo(map);
var markers = L.marker([35.232, 40.5656]).addTo(map);
component.set("v.map", map);
component.set("v.markers", markers);
},
putMarkers: function(component) {
var map = component.get('v.map');
var markers = component.get('v.markers');
var projects = component.get('v.projects');
var projectsAction = component.get("c.getProjectsList");
var markerArray = [];
var symbol;
var symbol1 = 'symbolURl';
var symbol2 = 'symbolURl';
projectsAction.setCallback(this, function(response) {
var state = response.getState();
if( state == "SUCCESS"){
projects = response.getReturnValue();
if (markers) {
markers.remove();
}
// Add Markers
if (map && projects && projects.length> 0) {
for (var i=0; i<projects.length; i++) {
var project = projects[i];
if (project.Latitude && project.Longitude) {
var latLng = [project.Latitude, project.Longitude];
var currentStatus = project.status;
if(currentStatus=="status1")
symbol = symbol1;
else if(currentStatus=="status2")
symbol = symbol2;
var popupTemplate = '<b style="color:black; font-size:11px;">Project Name:</b><span style="float:right;margin-right:10px;color:#800000;font-size:11px;width:110px;text-align:right; white-space:normal;" > '+project.name;
var icon = new L.DivIcon({
className:'',
html: '<img style="width:34px;height:37px;" src="'+symbol+'"/>'+
'<span style="font-weight:bold;font-size:9pt;">text</span>'
});
var marker = L.marker(latLng, {project: project,icon:icon,title:project.name}).bindPopup(popupTemplate,{minWidth:200});
markerArray.push(marker);
}
}
L.layerGroup(markerArray).addTo(map);
component.set("v.map", map);
}}
else if(state == "ERROR"){
console.log('Error in calling server side action');
}
});
$A.enqueueAction(projectsAction);
}
and in javascript controller:
jsLoaded: function(component, event, helper) {
var map = component.get("v.map");
if (!map) {
helper.drawMap(component,map);
helper.putMarkers(component);
}
},
projectsChangeHandler: function(component, event, helper) {
helper.putMarkers(component);
}
where is the problem? please help

this is a new bug for Vue3,I've solved it:
change Proxy'map to toRaw(map),like this:
L.geoJSON(geoJson, {
style: {
color: '#ff0000',
fillColor: "#ff000000",
weight: 1
},
onEachFeature: myonEachFeature,
}).addTo(toRaw(map))

I solved it by editing the leaflet.js file:
search for the word ( _latLngToNewLayerPoint )
and wrap the code with the condition:
if(this._map)
so if _map is null, skip
I don't know why this bug is only presented in salesforce

In my case it was related to the framework variable wrappers (vue.js).
When I use observable variable like this:
data() {
return {
map: null,
};
},
mounted() {
// here it's required to use a global variable
// or a variable without framework handlers
// map = L.map(...);
this.map = L.map('map', { preferCanvas: true }).setView([51.505, -0.09], 13);
}
I get error:
Popup.js:231 Uncaught TypeError: Cannot read property '_latLngToNewLayerPoint' of null
at NewClass._animateZoom (Popup.js:231)
at NewClass.fire (Events.js:190)
at NewClass._animateZoom (Map.js:1689)
at NewClass.<anonymous> (Map.js:1667)
The solution is just to define the map variable outside of framework, in other words use a global variable for leaflet structures.

Related

One pushpin click opens them all

Need help troubleshooting. All of the pushpins open upon clicking a single one opens up every pushpin infobox. I want there to be one pushpin infobox that changes each time a pushpin is clicked, only allowing one infobox to be open at a time.
// BING MAP Java Script
var map = null;
var pinid = 0;
var arrPinInfobox = [];
//Bing V8 start
function GetMap() { //LocInfo, Lat, Long
var _MapElement = document.getElementById("myMap");
if (_MapElement === null || typeof _MapElement === "undefined")
return;
if(jQuery("#pagesitemap_4_noMap").length < 0)
return;
var arrLocInfoRec = [];
var arrLLAdder = [];
var MapCenterLat;
var MapCenterLong;
var ZoomFactor;
var ZipLLSource = jQuery("#hdnZipLL").val();
var LocInfo = jQuery("#hdnCompleteLocInfo").val();
var ZipLL = [];
var Lat = "";
var Long ="";
console.log("Long");
if(typeof LocInfo === "undefined")
{
console.log("locInfo Undefined");
return;
}
if (ZipLLSource.length > 0) {
ZipLL = (ZipLLSource).split("`");
}
if (LocInfo.length > 0) {
arrLocInfoRec = LocInfo.split("|")
}
if (Lat.length > 0 && Long.length > 0) {
MapCenterLat = parseFloat(Lat);
MapCenterLong = parseFloat(Long);
ZoomFactor = 11; //16
}
else if (ZipLL.length >= 2) {
MapCenterLat = parseFloat(ZipLL[0]);
MapCenterLong = parseFloat(ZipLL[1]);
ZoomFactor = 11;
}
var mapOptions = {
credentials: ' ',
center: new Microsoft.Maps.Location(MapCenterLat, MapCenterLong),
mapTypeId: Microsoft.Maps.MapTypeId.Automatic,
zoom: ZoomFactor,
showScalebar: true
}
map = new Microsoft.Maps.Map('#myMap', mapOptions);
var arrPins = [];
var arrPinCenter = [];
//Generating Pins for multiple locations with Lat,Long
for (var locNum = 0; locNum <= arrLocInfoRec.length - 1; locNum++) {
try {
arrLLAdder = arrLocInfoRec[locNum].split("`");
if (arrLLAdder.length >= 13) {
//var latlong = arrLLAdder[11].split(',');
arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));
arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));
arrPins[locNum] = new Microsoft.Maps.Pushpin(
arrPinCenter[locNum], {
text: arrLLAdder[8] ,
icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
anchor: new Microsoft.Maps.Point(12, 39)
}
);
var adder = arrLLAdder[2] + '\r\n' + arrLLAdder[4] + '\r\n' + arrLLAdder[6] + arrLLAdder[9] + "\r\n" + arrLLAdder[1]
// Create the infobox for the pushpin
arrPinInfobox[locNum] = new Microsoft.Maps.Infobox(arrPins[locNum].getLocation(),
{ width: 350,
height: 100,
title: arrLLAdder[5],
description: adder,
offset: new Microsoft.Maps.Point(-3,13),
visible: false
});
// Add handler for the pushpin click event.
Microsoft.Maps.Events.addHandler(arrPins[locNum], 'click', displayInfobox);
// Add the Push Pins and InfoBox to the map all at once
if(arrPins.length > 0) {
map.entities.push(arrPins); //[locNum]
}
}
else {
console.log("Invalid Data: arrLocInfoRec[" + locNum + "] = \"" + arrLocInfoRec[locNum] + "\"");
}
} catch (e) {
console.log(e.message + "\r\n" + arrLocInfoRec[locNum]);
}
}
}
function displayInfobox(e) {
//map.entities.push(arrPinInfobox);
console.log("DisplayBox");
for(var i in arrPinInfobox){
arrPinInfobox[i].setOptions({ visible: true });
arrPinInfobox[parseInt(e.target.getText()) - 1].setOptions({ visible: true });
var infobox = arrPinInfobox[i];
infobox.setMap(map);
}
}
Your code in the displayInfobox function loops through all your infoboxes and sets visible to true and adding them to the map. Your code is functioning how it was written.
What you want to do is filter out your infoboxes. Personally I hate the whole array of infobox idea, it is messy. I believe I've recommended before the idea of creating a single infobox and reusing it when a pushpin is clicked. That is the best approach if you only need one infobox to appear at a time. If you want to be able to show multiple infoboxes at a time, store the reference to the infobox in the pushpin some how. All shapes in Bing Maps has a metadata property reserved for your custom data. Also just noticed you add the array of pushpins to the map several times, this will cause issues. Here is a proposed change to your code, I've added a comment with // Ricky: to indicate the changes I made:
// BING MAP Java Script
var map = null;
var pinid = 0;
var arrPinInfobox = [];
//Bing V8 start
function GetMap() { //LocInfo, Lat, Long
var _MapElement = document.getElementById("myMap");
if (_MapElement === null || typeof _MapElement === "undefined")
return;
if(jQuery("#pagesitemap_4_noMap").length < 0)
return;
var arrLocInfoRec = [];
var arrLLAdder = [];
var MapCenterLat;
var MapCenterLong;
var ZoomFactor;
var ZipLLSource = jQuery("#hdnZipLL").val();
var LocInfo = jQuery("#hdnCompleteLocInfo").val();
var ZipLL = [];
var Lat = "";
var Long ="";
console.log("Long");
if(typeof LocInfo === "undefined")
{
console.log("locInfo Undefined");
return;
}
if (ZipLLSource.length > 0) {
ZipLL = (ZipLLSource).split("`");
}
if (LocInfo.length > 0) {
arrLocInfoRec = LocInfo.split("|")
}
if (Lat.length > 0 && Long.length > 0) {
MapCenterLat = parseFloat(Lat);
MapCenterLong = parseFloat(Long);
ZoomFactor = 11; //16
}
else if (ZipLL.length >= 2) {
MapCenterLat = parseFloat(ZipLL[0]);
MapCenterLong = parseFloat(ZipLL[1]);
ZoomFactor = 11;
}
var mapOptions = {
credentials: ' ',
center: new Microsoft.Maps.Location(MapCenterLat, MapCenterLong),
mapTypeId: Microsoft.Maps.MapTypeId.Automatic,
zoom: ZoomFactor,
showScalebar: true
}
map = new Microsoft.Maps.Map('#myMap', mapOptions);
var arrPins = [];
var arrPinCenter = [];
//Generating Pins for multiple locations with Lat,Long
for (var locNum = 0; locNum <= arrLocInfoRec.length - 1; locNum++) {
try {
arrLLAdder = arrLocInfoRec[locNum].split("`");
if (arrLLAdder.length >= 13) {
//var latlong = arrLLAdder[11].split(',');
arrPinCenter[locNum] = new Microsoft.Maps.Location(parseFloat(arrLLAdder[11]), parseFloat(arrLLAdder[12]));
arrPins[locNum] = new Microsoft.Maps.Pushpin(arrPinCenter[locNum], {
text: arrLLAdder[8] ,
icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',
anchor: new Microsoft.Maps.Point(12, 39)
});
var adder = arrLLAdder[2] + '\r\n' + arrLLAdder[4] + '\r\n' + arrLLAdder[6] + arrLLAdder[9] + "\r\n" + arrLLAdder[1]
// Create the infobox for the pushpin
//Ricky: Add your infobox as a reference in your pushpin
arrPins[locNum]. metadata = new Microsoft.Maps.Infobox(arrPins[locNum].getLocation(),
{ width: 350,
height: 100,
title: arrLLAdder[5],
description: adder,
offset: new Microsoft.Maps.Point(-3,13),
visible: false
});
// Add handler for the pushpin click event.
Microsoft.Maps.Events.addHandler(arrPins[locNum], 'click', displayInfobox);
}
else {
console.log("Invalid Data: arrLocInfoRec[" + locNum + "] = \"" + arrLocInfoRec[locNum] + "\"");
}
} catch (e) {
console.log(e.message + "\r\n" + arrLocInfoRec[locNum]);
}
}
// Add the Push Pins and InfoBox to the map all at once
//Ricky: Moved this out of the array as you only need to add array of pushpins to the map once.
if(arrPins.length > 0) {
map.entities.push(arrPins); //[locNum]
}
}
function displayInfobox(e) {
//map.entities.push(arrPinInfobox);
console.log("DisplayBox");
//Get infobox from the pushpin, rather than looping through array.
var infobox = e.target.metadata;
infobox.setOptions({ visible: true });
//for(var i in arrPinInfobox){
//arrPinInfobox[i].setOptions({ visible: true });
//arrPinInfobox[parseInt(e.target.getText()) - 1].setOptions({ visible: true });
//var infobox = arrPinInfobox[i];
//infobox.setMap(map);
//}
}
If you want to clean up your code some more I recommend:
get rid of all the array's, there is no need for them.
Use a layer for your pushpins. Add a single click event on the layer rather than on each individual pushpin.

Mapbox and Leaflet Draw edit only 1 group

I want to add multiple layergroup or featuregroup objects or something else if there's a better way on a map that can contain multiple polygons in each. I want these groups to be distinguishable so they can be used in conjunction with datatables and the leaflet draw tool so that when I select a row within datatables, only the polygons within the related group can be edited or deleted using the draw tool and any new polygons are only added to that group.
I've done this before with only a single polygon and one featuregroup, but how do I handle multiple groups?
featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
},
draw: {
marker: false,
polygon: true,
polyline: false,
rectangle: false,
circle: false
},
locate: {
marker: true
}
}).addTo(map);
$('.leaflet-control-zoom').css('margin-top', '45px');
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw damage area';
L.drawLocal.edit.toolbar.buttons.edit = 'Edit damage area';
L.drawLocal.edit.toolbar.buttons.remove = 'Delete damage area';
if (jsModel.polygonpoints)
{
var polygonPoints = jsModel.polygonpoints.split(';');
if (polygonPoints.length > 0) {
var polyPoints = [];
for (var i = 0; i < polygonPoints.length; i++) {
var point = polygonPoints[i].split(',');
polyPoints.push([parseFloat(point[0]), parseFloat(point[1])]);
}
var points = polyPoints;
var polyOptions = {
color: '#f06eaa'
};
var polygon;
if (typeof featureGroup !== "undefined") {
polygon = L.polygon(points, polyOptions).addTo(self.featureGroup);
self.polygon = polygon;
}
}
}
I'm trying to add the polygons during a render of my datatable columns. Here is what I have so far. I saw a post somewhere that talked about adding multiple draw tools and then only make the current one available. Not sure if this is a good way to do it, but if it is, what can I use in my button's "data-draw-control" to be able to point to the one I want to be current?
"columns": [
{
"render": function (data, type, row) {
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
},
draw: {
marker: false,
polygon: true,
polyline: false,
rectangle: false,
circle: false
}
}).addTo(map);
for (var al = 0; al < row.areaList.length; al++)
{
var polyPoints = [];
for (var ap = 0; ap < row.areaList[al].areaPointList.length; ap++)
{
if (row.areaList[al].areaPointList[ap].x == 0 && row.areaList[al].areaPointList[ap].y == 0)
{
if (polyPoints.length != 0)
{
//add polygon to map
L.polygon(polyPoints).addTo(featureGroup);
polyPoints.length = 0;
}
}
else
{
polyPoints.push([parseFloat(row.areaList[al].areaPointList[ap].x), parseFloat(row.areaList[al].areaPointList[ap].y)]);
}
}
}
return "<button type='button' class='btn-zoom' data-draw-control='" + drawControl + "'><i class='fa fa-search'></i></button";
}
}
First create two featuregroups and a layercontrol so you can toggle between them:
var layerControl = new L.Control.Layers({
'FeatureGroup 1': new L.FeatureGroup(),
'FeatureGroup 2': new L.FeatureGroup()
}).addTo(map);
Now then you toggle between those, the map fires a basemapchanged event which contains the currently selected featuregroup, store that in a variable:
var currentFeatureGroup;
map.on('baselayerchange', function (e) {
currentFeatureGroup = e.layer;
});
When you draw something, the map fires another event where you can process the drawn feature. Create a function that returns the currently selected featuregroup and store it into that:
function getCurrentFeatureGroup () {
return currentFeatureGroup;
}
map.on('draw:created', function (e) {
var featureGroup = getCurrentFeatureGroup();
if (featureGroup instanceof L.FeatureGroup) {
featureGroup.addLayer(e.layer);
} else {
alert('Please select a featuregroup');
}
});
Here's an example of the concept on Plunker: http://plnkr.co/edit/9ZEjuP?p=preview

Leaflet : Map container is already initialized

The User types some address (Hyderabad,Telanagna) on text field and clicks on Go button
I am fetching the latitude_res and longitude from google Map API as shown below
$(document).on('click', '.gobtn', function(event) {
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '', function(data) {
latitude_res = data.results[0].geometry.location.lat;
longitude_res = data.results[0].geometry.location.lng;
}).done(function() {
});
});
I am able to fetch the latitude and longitude , from google API say for example i got the following values
**17.385044
78.910965**
Then i am making a Ajax call again to fetch all the Markers present at this location in our Database .
And finally initializaing the map as shown below
initializeMap(lator,lonor,markers);
function initializeMap(lator, lonor, markers) {
var map = new L.Map('map_canvas', {
center: new L.LatLng(lator, lonor),
zoom: 5
});
var ggl = new L.Google();
var ggl2 = new L.Google('ROADMAP');
map.addLayer(ggl2);
if (markers.length > 0) {
var markers_leafcontainer = new L.MarkerClusterGroup();
var markersList = [];
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].latitude);
var lng = parseFloat(markers[i].longititude);
var trailhead_name = markers[i].address;
var dealerId = markers[i].dealerID_db;
var dealername = markers[i].dealerName_db;
var contentString = "<html><body><div><p><h2>" + dealername + "</h2></p></div></body></html>";
var marker = L.marker(new L.LatLng(lat, lng), {}).on('click', onClick);
$(".howmanyfound").text(markers.length + ' Found');
markers_leafcontainer.addLayer(marker);
}
map.addLayer(markers_leafcontainer);
map.fitBounds(markers_leafcontainer.getBounds()); //set view on the cluster extent
}
}
Only for the first time this is working , from there on i am getting Uncaught Error: Map container is already initialized.
I am using leaflet with google Maps
So, don't initialize the map inside your function.
var map = new L.Map('map_canvas');
initializeMap(lator,lonor,markers);
function initializeMap(lator, lonor, markers) {
map.setView(L.latLng(lator, lonor));
}

How can I remove a single overlay in Openlayers 3.3.0?

I am creating overlays in my mapping application that I need to refresh every 5 seconds. I am only having difficulties removing the stale overlay from my map using the code below. The map.removeOverlay method does not seem to be working correctly. The stacking of the overlays is visibly apparent after only a few iterations.
Using map.getOVerlays().clear() removes the stale overlay, however, this removes all overlays which is not desired. Any assistance with this is appreciated.
window.setInterval(function() {
$.ajaxSetup({ mimeType: "text/plain" });
$.getJSON('json/DATA.json', function(data) {
$.each(data.item, function(key, val) {
var storeName = this.name;
var storeLocation = this.location;
var storeLatitude = this.latitude;
var storeLongitude = this.longitude;
$.each(val.tasks, function(i, j){
var taskName = this.name;
var taskState = this.state;
if (taskState == "Open") {
var taskGeometry = ol.proj.transform([storeLongitude,storeLatitude], 'EPSG:4326', 'EPSG:3857');
function createCircleOutOverlay(position) {
var elem = document.createElement('div');
elem.setAttribute('class', 'circleOut');
return new ol.Overlay({
element: elem,
position: position,
positioning: 'center-center'
});
}
var taskOverlay = createCircleOutOverlay(taskGeometry);
map.removeOverlay(taskOverlay);
map.addOverlay(taskOverlay);
}
});
});
});
}, 5000);
var taskOverlay = createCircleOutOverlay(taskGeometry);
map.removeOverlay(taskOverlay);
The problem is that you are trying to remove the new overlay and not the old one. You would have to store a reference to the overlay so that OpenLayers can remove it from the map. Something like:
var currentOverlay = null;
window.setInterval(function() {
$.ajaxSetup({ mimeType: "text/plain" });
// ...
if (currentOverlay === null) {
map.removeOverlay(currentOverlay);
}
currentOverlay = createCircleOutOverlay(taskGeometry);
map.addOverlay(currentOverlay);
// ...

Integrating / adding Google Earth View to my map

I am creating an interactive map for a non profit association "Friends of Knox Mountain Park" but I am getting trouble with the Google Earth view.
I've been searching on the web for weeks and none of the solutions I found works for me. Can someone take a look of the code and let me know what I should do to include Google Earth View in the map? Thanks in advance.
The online project: http://www.virtualbc.ca/knoxmountain/
And this is the javascript file (mapa2.js) containing the google map's code:
google.load('earth', '1');
var map;
var googleEarth;
var gmarkers = [];
var iconShadow = new google.maps.MarkerImage('icons/shadow.png',
new google.maps.Size(46, 42),
new google.maps.Point(0,0),
new google.maps.Point(13, 42));
var sites = [
['Apex Trail - Shelter',49.91174271, -119.48507050, 4, '<img src="images/apex_point_high.jpg">','magenta','14'],
['Apex Trail',49.91286999, -119.48413424, 3, '<img src="images/apex_point_low.jpg">','lemon','1'],
['Gordon Trail',49.91971281, -119.47954356, 2, '<img src="images/apex_point_low.jpg">','lemon','1'],
['Paul Tomb Bay',49.92555541, -119.47710250, 1, '<img src="images/tomb_bay.jpg">','lemon','1']
];
var infowindow = null;
var overlay;
// Used to make Google Map quard coords to MapCruncher/BingMaps quard coords
function TileToQuadKey ( x, y, zoom)
{
var quad = "";
for (var i = zoom; i > 0; i--)
{
var mask = 1 << (i - 1);
var cell = 0;
if ((x & mask) != 0)
cell++;
if ((y & mask) != 0)
cell += 2;
quad += cell;
}
return quad;
}
function init() {
var centerMap = new google.maps.LatLng(49.909671, -119.482241);
var myOptions = {
zoom: 10,
center: centerMap,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create the tile layers
// ASTER Tile Layer
myASTEROptions = {
getTileUrl : function (a,b) {
return "http://www.virtualbc.ca/knoxmountain/map/" + TileToQuadKey(a.x,a.y,b) + ".png";
},
isPng: true,
opacity: 1.0,
tileSize: new google.maps.Size(256,256),
name: "ASTER",
minZoom:13,
maxZoom:20
}
ASTERMapType = new google.maps.ImageMapType( myASTEROptions );
map.overlayMapTypes.insertAt(0, ASTERMapType);
// Aerial Tile Layer
myAerialOptions = {
getTileUrl : function (a,b) {
return "http://www.virtualbc.ca/knoxmountain/map/" + TileToQuadKey(a.x,a.y,b) + ".png";
},
isPng: true,
opacity: 1.0,
tileSize: new google.maps.Size(256,256),
name: "Aerial",
minZoom:15,
maxZoom:21
}
AerialMapType = new google.maps.ImageMapType( myAerialOptions );
map.overlayMapTypes.insertAt(1, AerialMapType);
var panorama = new google.maps.StreetViewPanorama(map.getDiv());
panorama.setVisible(false);
panorama.set('enableCloseButton', true);
map.setStreetView(panorama);
panorama.setPosition(centerMap);
setMarkers(map, sites);
setZoom(map, sites);
infowindow = new google.maps.InfoWindow({
content: "Loading..."
});
googleEarth = new GoogleEarth(map);
google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
}
/*
This functions sets the markers (array)
*/
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var site = markers[i];
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4],
// Markers drop on the map
animation: google.maps.Animation.DROP,
icon: 'http://www.virtualbc.ca/knoxmountain/icons/icon.png',
shadow: iconShadow
});
gmarkers.push(marker);
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
/*
Set the zoom to fit comfortably all the markers in the map
*/
function setZoom(map, markers) {
var boundbox = new google.maps.LatLngBounds();
for ( var i = 0; i < markers.length; i++ )
{
boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
}
map.setCenter(boundbox.getCenter());
map.fitBounds(boundbox);
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i-1], "click");
}
google.maps.event.addDomListener(window, 'load', init);
The first issue I notice with your site is you are linking to http://www.virtualbc.ca/src/googleearth-compiled.js which does not exist.