I am trying to add custom overlay & Kml layer. The custom layer is working, but the KML layer is not showing at all. What would cause this?
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {lat: 31.1917, lng: 27.56553},
mapTypeId: 'satellite'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.18954, 27.56144),
new google.maps.LatLng(31.19277, 27.56806));
var srcImage = 'https://travcop.zohosites.com/selc02.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
/** #constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
var kmlLayer = new google.maps.KmlLayer({
url: 'https://travcop.zohosites.com/sel.kml',
suppressInfoWindows: true,
map: map
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
google.maps.event.addDomListener(window, 'load', initMap);
I am not sure why the KML layer is not loading. Could be the two layers loading in the same time?
Trying to create a real estate portal where data is marked in KML and the map is for a future project that is not yet displayed on Google Maps
I get a javascript error with the posted code: Uncaught ReferenceError: map is not defined.
The map variable is local to your initMap function, you need to instantiate the KmlLayer inside your initMap method.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {lat: 31.1917, lng: 27.56553},
mapTypeId: 'satellite'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.18954, 27.56144),
new google.maps.LatLng(31.19277, 27.56806));
var srcImage = 'https://travcop.zohosites.com/selc02.png';
overlay = new USGSOverlay(bounds, srcImage, map);
var kmlLayer = new google.maps.KmlLayer({
url: 'https://travcop.zohosites.com/sel.kml',
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
}
Once I fix that, there is another error: Uncaught ReferenceError: overlayProjection is not defined, because overlayProjection isn't defined. Taking the definition from Google's example fixes that.
proof of concept fiddle
code snippet:
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {
lat: 31.1917,
lng: 27.56553
},
mapTypeId: 'satellite'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.18954, 27.56144),
new google.maps.LatLng(31.19277, 27.56806));
var srcImage = 'https://travcop.zohosites.com/selc02.png';
overlay = new USGSOverlay(bounds, srcImage, map);
var kmlLayer = new google.maps.KmlLayer({
url: 'https://travcop.zohosites.com/sel.kml',
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
console.log(kmlLayer.getStatus());
})
map.fitBounds(bounds);
}
/** #constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
Related
While displaying an overlay over google maps using the API. I am googling for last three days how to calculate the South West and North east bounds for an overlay of size 100X100. I found millions of examples but the bounds were written hard coded.
My input is Center Latitude and Longitude and a 100x100 image.
The code I found is:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 62.323907, lng: -150.109291},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(SE),
new google.maps.LatLng(NE));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
srcImage += 'examples/full/images/talkeetna.png';
overlay = new USGSOverlay(bounds, srcImage, map);
}
I am woundering how these bounds were calculated?
SE and NE
To calculate the bounds (specifically a google.maps.LatLngBounds object) that is 100px x 100px centered at the center of the bounds of that overlay:
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
find the pixel position of the center:
var center = bounds.getCenter();
var centerPt = overlay.getProjection().fromLatLngToDivPixel(center);
find the pixel point 50px up and 50px right of it
var topRightPt = new google.maps.Point(centerPt.x+50, centerPt.y+50);
find the pixel point 50px down and 50px left of it
var botLeftPt = new google.maps.Point(centerPt.x-50, centerPt.y-50);
translate those back to latitude and longitude coordinates
var sw = overlay.getProjection().fromDivPixelToLatLng(botLeftPt);
var ne = overlay.getProjection().fromDivPixelToLatLng(topRightPt);
proof of concept fiddle
overlay = new USGSOverlay(bounds, srcImage, map);
google.maps.event.addListener(overlay, 'projection_changed', function() {
var centerPt = overlay.getProjection().fromLatLngToDivPixel(center);
var topRightPt = new google.maps.Point(centerPt.x+50, centerPt.y+50);
var botLeftPt = new google.maps.Point(centerPt.x-50, centerPt.y-50);
var sw = overlay.getProjection().fromDivPixelToLatLng(botLeftPt);
var ne = overlay.getProjection().fromDivPixelToLatLng(topRightPt);
var overlayBnds = new google.maps.LatLngBounds(sw,ne);
var rectangle = new google.maps.Rectangle({
map: map,
bounds: overlayBnds
})
});
code snippet:
google.maps.event.addDomListener(window, "load", initMap);
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.
// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
// Initialize the map and the custom overlay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 62.323907,
lng: -150.109291
},
mapTypeId: 'satellite'
});
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
var center = bounds.getCenter();
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
// The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);
google.maps.event.addListener(overlay, 'projection_changed', function() {
var centerPt = overlay.getProjection().fromLatLngToDivPixel(center);
var topRightPt = new google.maps.Point(centerPt.x + 50, centerPt.y + 50);
var botLeftPt = new google.maps.Point(centerPt.x - 50, centerPt.y - 50);
var sw = overlay.getProjection().fromDivPixelToLatLng(botLeftPt);
var ne = overlay.getProjection().fromDivPixelToLatLng(topRightPt);
var overlayBnds = new google.maps.LatLngBounds(sw, ne);
var rectangle = new google.maps.Rectangle({
map: map,
bounds: overlayBnds
})
});
}
/** #constructor */
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
First of all, I am totally aware that a similar question has been asked here
I used the JSFiddle proposed in the accepted answer - JsFiddle
The code provides me both markers coordinates as expected
google.maps.event.addListener(markerA, 'dragend', function () {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
console.log("point1"+ newPointA);
console.log("point2"+ newPointB);
});
google.maps.event.addListener(markerB, 'dragend', function () {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
console.log("point1"+ newPointA);
console.log("point2"+ newPointB);
});
My problem is that I am using Open Street Map and after positioning my image and using the coordinates in my application, the image is not correctly positioned as in the JSFiddle.
I found that both Google Maps and Open Street Map have a significant difference with their coordinates.
How can I find the correct position for the overlay?
There are tutorials on the web to display OSM tiles on Google Maps, one in the OSM documentation from a quick search: Google Maps Example
Combining that with the Google Maps example yields this fiddle
code snippet:
var overlay;
var map;
DebugOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(40.743388, -74.007592),
mapTypeId: "OSM",
mapTypeControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// 40.674018,-74.251324,40.788664,-74.116993
var swBound = new google.maps.LatLng(40.674018, -74.251324);
var neBound = new google.maps.LatLng(40.788664, -74.116993);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
map.fitBounds(bounds);
var srcImage = 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
overlay = new DebugOverlay(bounds, srcImage, map);
var markerA = new google.maps.Marker({
position: swBound,
map: map,
draggable: true
});
var markerB = new google.maps.Marker({
position: neBound,
map: map,
draggable: true
});
google.maps.event.addListener(markerA, 'drag', function() {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
overlay.updateBounds(newBounds);
});
google.maps.event.addListener(markerB, 'drag', function() {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
overlay.updateBounds(newBounds);
});
google.maps.event.addListener(markerA, 'dragend', function() {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
console.log("point1" + newPointA);
console.log("point2" + newPointB);
});
google.maps.event.addListener(markerB, 'dragend', function() {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
console.log("point1" + newPointA);
console.log("point2" + newPointB);
});
}
function DebugOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
DebugOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.opacity = '0.5';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
DebugOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
DebugOverlay.prototype.updateBounds = function(bounds) {
this.bounds_ = bounds;
this.draw();
};
DebugOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
initialize();
//google.maps.event.addDomListener(window, 'load', initialize);
//Define OSM map type pointing at the OpenStreetMap tile server
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// "Wrap" x (logitude) at 180th meridian properly
// NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
x = tilesPerGlobe + x;
}
// Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
}));
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<div id="footer">© OpenStreetMap contributors</div>
I have many (100s) of maps in a databse made for V2. Now migrating to V3 and they're all offeset by quite a long way than they were before.
Have I done something wrong? Or is there a bug or difference that I have to correct? I don't really want to have to re-make all my maps for the new version.
See an example here: http://www.trebrown.com/plant_info_temp.php?species=Bismarckia+nobilis+sp.+silver Scroll down the page to se the map, and then zoom out 1 or 2 stops, you'll then see the Madagascar map out in the middle of the Indian ocean.
Here's my code:
var overlay;
TrebrownOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var marker;
var sp_id = "353";
function createMarker(point,infowindow) {
var marker = new google.maps.Marker({ position: point, map: map, title:"" });
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
return marker;
}
var localitiy = new google.maps.LatLng(-19.311144, 46.362305);
var mapOptions = {
zoom: 5,
center: localitiy,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var swBound = new google.maps.LatLng(-27.371767300523032, 33.1787109375);
var neBound = new google.maps.LatLng(-10.83330598364249, 59.5458984375);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'http://www.trebrown.com/images/maps/bismarckia-nobilis.png';
overlay = new TrebrownOverlay(bounds, srcImage, map);
}
function TrebrownOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
TrebrownOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
TrebrownOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
TrebrownOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
google.maps.event.addDomListener(window, 'load', initialize);
It's a CSS-issue, there is a interaction with the style of the parent-element of #map-canvas
remove the format text-align: right; from the parent div.morespace
or override it by applying the style text-align:left for #map-canvas
I want to display a circle like in this sample:
https://developers.google.com/maps/documentation/javascript/examples/circle-simple?hl=en
I do not want to use clustered markers as I really just need to display some circles with a
number inside.
UPDATE
That is my code:
$(document).ready(function() {
//Google maps API initialisation
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
/* constructor */
function USGSOverlay(bounds, map, alarmnumber) {
// Now initialize all properties.
this.bounds_ = bounds;
this.map_ = map;
this.alarmnumber_ = alarmnumber;
// We define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.border = '1px solid #000';
div.style.fontWeight = 'bold';
div.style.backgroundColor = '#fff';
$(div).attr('id', 'alarmDiv' + this.alarmnumber_);
$(div).addClass("circle");
$(div).addClass("center");
// Set the overlay's div_ property to this DIV
this.div_ = div;
this.div_.innerHTML = this.alarmnumber_;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayLayer pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = (sw.x - 20) + 'px';
div.style.top = (ne.y - 20) + 'px';
div.style.width = 40 + 'px';
div.style.height = 40 + 'px';
};
var element = document.getElementById("map");
var map = new google.maps.Map(element, {
center: new google.maps.LatLng(48.705236, 9.128566), // Latitude/Breitengrad , Longitude/Längengrad
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP, // Google maps provider
//mapTypeId: "OSM", // OpenStreetMap provider
mapTypeControl: false,
streetViewControl: false
});
I found this script.
It allows to create a info window with google api. I modified it to fit my needs but I can't forbid it to open all infowindows automatically when I load the page (I only want a single info window appears when the costumers click on the marker).
Someone can help me?
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var browserSupportFlag = new Boolean();
/* An InfoBox is like an info window, but it displays
* under the marker, opens quicker, and has flexible styling.
* #param {GLatLng} latlng Point to place bar at
* #param {Map} map The map on which to display this InfoBox.
* #param {Object} opts Passes configuration options - content,
* offsetVertical, offsetHorizontal, className, height, width
*/
function InfoBox(opts) {
google.maps.OverlayView.call(this);
this.latlng_ = opts.latlng;
this.map_ = opts.map;
this.offsetVertical_ = -195;
this.offsetHorizontal_ = 0;
this.height_ = 165;
this.width_ = 266;
var me = this;
this.boundsChangedListener_ =
google.maps.event.addListener(this.map_, "bounds_changed", function() {
return me.panMap.apply(me);
});
// Once the properties of this OverlayView are initialized, set its map so
// that we can display it. This will trigger calls to panes_changed and
// draw.
this.setMap(this.map_);
}
/* InfoBox extends GOverlay class from the Google Maps API
*/
InfoBox.prototype = new google.maps.OverlayView();
/* Creates the DIV representing this InfoBox
*/
InfoBox.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
/* Redraw the Bar based on the current projection and zoom level
*/
InfoBox.prototype.draw = function() {
// Creates the element if it doesn't exist already.
this.createElement();
if (!this.div_) return;
// Calculate the DIV coordinates of two opposite corners of our bounds to
// get the size and position of our Bar
var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (!pixPosition) return;
// Now position our DIV based on the DIV coordinates of our bounds
this.div_.style.width = "389px";
this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
this.div_.style.height = "135px";
this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
this.div_.style.display = 'block';
};
/* Creates the DIV representing this InfoBox in the floatPane. If the panes
* object, retrieved by calling getPanes, is null, remove the element from the
* DOM. If the div exists, but its parent is not the floatPane, move the div
* to the new pane.
* Called from within draw. Alternatively, this can be called specifically on
* a panes_changed event.
*/
InfoBox.prototype.createElement = function() {
var panes = this.getPanes();
var div = this.div_;
if (!div) {
// This does not handle changing panes. You can set the map to be null and
// then reset the map to move the div.
div = this.div_ = document.createElement("div");
div.style.border = "1px solid #CCC";
div.style.position = "absolute";
div.style.background = "url('img/proj_box.png')"; //389 × 135
div.style.width = "389px";
div.style.height = "135px";
var contentDiv = document.createElement("div");
contentDiv.style.padding = "30px"
contentDiv.innerHTML = "<b>Hello World!</b>";
var topDiv = document.createElement("div");
topDiv.style.textAlign = "right";
var closeImg = document.createElement("img");
closeImg.style.width = "32px";
closeImg.style.height = "32px";
closeImg.style.cursor = "pointer";
closeImg.src = "http://gmaps-samples.googlecode.com/svn/trunk/images/closebigger.gif";
topDiv.appendChild(closeImg);
function removeInfoBox(ib) {
return function() {
ib.setMap(null);
};
}
google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));
div.appendChild(topDiv);
div.appendChild(contentDiv);
div.style.display = 'none';
panes.floatPane.appendChild(div);
this.panMap();
} else if (div.parentNode != panes.floatPane) {
// The panes have changed. Move the div.
div.parentNode.removeChild(div);
panes.floatPane.appendChild(div);
} else {
// The panes have not changed, so no need to create or move the div.
}
}
/* Pan the map to fit the InfoBox.
*/
InfoBox.prototype.panMap = function() {
// if we go beyond map, pan map
var map = this.map_;
var bounds = map.getBounds();
if (!bounds) return;
// The position of the infowindow
var position = this.latlng_;
// The dimension of the infowindow
var iwWidth = this.width_;
var iwHeight = this.height_;
// The offset position of the infowindow
var iwOffsetX = this.offsetHorizontal_;
var iwOffsetY = this.offsetVertical_;
// Padding on the infowindow
var padX = 40;
var padY = 40;
// The degrees per pixel
var mapDiv = map.getDiv();
var mapWidth = mapDiv.offsetWidth;
var mapHeight = mapDiv.offsetHeight;
var boundsSpan = bounds.toSpan();
var longSpan = boundsSpan.lng();
var latSpan = boundsSpan.lat();
var degPixelX = longSpan / mapWidth;
var degPixelY = latSpan / mapHeight;
// The bounds of the map
var mapWestLng = bounds.getSouthWest().lng();
var mapEastLng = bounds.getNorthEast().lng();
var mapNorthLat = bounds.getNorthEast().lat();
var mapSouthLat = bounds.getSouthWest().lat();
// Remove the listener after panning is complete.
google.maps.event.removeListener(this.boundsChangedListener_);
this.boundsChangedListener_ = null;
};
function initialize() {
var myOptions = {
zoom: 11,
//scrollwheel: false,
//navigationControl: false,
//mapTypeControl: false,
//scaleControl: false,
//draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}
, function() {
handleNoGeolocation(browserSupportFlag);
});
// Try Google Gears Geolocation
//AJOUT MARKERS
// Create a base icon for all of our markers that specifies the
var myLatlng = new google.maps.LatLng(48,2);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, "click", function(e) {
var infoBox = new InfoBox({latlng: marker.getPosition(), map: map});
});
google.maps.event.trigger(marker, "click");
var myLatlng2 = new google.maps.LatLng(48.8,2);
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker2, "click", function(e) {
var infoBox2 = new InfoBox({latlng: marker2.getPosition(), map: map});
});
google.maps.event.trigger(marker2, "click");
}
}
</script>
Remove these lines from your initialize function:
google.maps.event.trigger(marker, "click");
google.maps.event.trigger(marker2, "click");