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/
Related
I am using two Google maps with set sizes inside a single Bootstrap row split into two "col-md-6". The problem is that I can't get the maps to centre within the columns.
I've tried placing the maps within another div, and applying a class such as:
.centre {
margin-left: auto;
margin-right: auto;
}
I have used this approach on the containing div and the map canvas itself.
I have also tried the Bootstraps center-block class.
Why won't this work? Is it because the map is generated by the script? However I also used some other script widget which I could centre no problem.
Here is my code:
<div class="row">
<div class="col-md-6">
<div class="center-block">
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:400px;width:400px;'>
<div id='gmap_canvas' style='height:400px;width:400px;'></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<a href='https://embed-map.org/'>adding google maps to website</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=de6f66c1083e8292c0be178f836c7b9580eaf39f'></script>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(53.5963138,-2.2334897000000637),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53.5963138,-2.2334897000000637)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>The Cherwell Wellbeing Hub</strong><br>Cherwell Avenue<br>OL10 4SY Heywood<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
</div>
<div class="col-md-6">
<div class="center-block">
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:400px;width:400px;'>
<div id='gmap_canvas1' style='height:400px;width:400px;'></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=79bf837985bd36410db02fbfc1b92f01d77d4475'></script>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(53.41196129999999,-2.7916708999999855),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas1'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53.41196129999999,-2.7916708999999855)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Grenfell House</strong><br>Widness Road<br>WA8 6AX Widnes<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
</div>
</div>
Works fine by me: http://codepen.io/ruchiccio/pen/LZZJaP
All you need is text-align:center on the divs housing the google maps.
This code loads lat/lng data from an array, and creates markers in a loop as the index advances. With each loop iteration, an event listener is created for each marker which should delete that marker on a click event using marker.setMap(null). The markers are placed properly in the map, but clicking on any of them deletes the final marker in the array, instead of the marker that was clicked on. I would expect such behavior if the event listener were placed after the loop, picking up only the last marker, but it is inside the loop. It seems straightforward, but I can't figure out what the problem is after trying many variations. Thanks for any help!
<!DOCTYPE html>
<html>
<head>
<title>deleteMarkerTest.html</title>
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#map-canvas, #map_canvas {height: 100%;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markersToSet = [
{lat: 33.037430,lng: -117.090111,title: "1765"},
{lat: 33.038330,lng: -117.090195,title: "1766"},
{lat: 33.038013,lng: -117.087593,title: "1767"},
{lat: 33.035110,lng: -117.088516,title: "1768"},
{lat: 33.034447,lng: -117.089729,title: "1769"}
];
function initialize() {
var mapCenter = new google.maps.LatLng(33.037380,-117.090431);
var mapOptions = {
zoom: 16,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.TRAFFIC
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
for (i = 0; i < markersToSet.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(markersToSet[i].lat, markersToSet[i].lng),
title: markersToSet[i].title,
map: map
});
google.maps.event.addListener(marker, 'click', function(event) {
marker.setMap(null);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
The marker variable is left pointing to the last marker (so it gets deleted). Simplest way to fix it is to use function closure to associate the marker with the click event:
<!DOCTYPE html>
<html>
<head>
<title>deleteMarkerTest.html</title>
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#map-canvas, #map_canvas {height: 100%;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markersToSet = [
{lat: 33.037430,lng: -117.090111,title: "1765"},
{lat: 33.038330,lng: -117.090195,title: "1766"},
{lat: 33.038013,lng: -117.087593,title: "1767"},
{lat: 33.035110,lng: -117.088516,title: "1768"},
{lat: 33.034447,lng: -117.089729,title: "1769"}
];
function initialize() {
var mapCenter = new google.maps.LatLng(33.037380,-117.090431);
var mapOptions = {
zoom: 16,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.TRAFFIC
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
for (i = 0; i < markersToSet.length; i++) {
createMarker(markersToSet[i].lat,markersToSet[i].lng,markersToSet.title);
}
}
function createMarker(lat, lng,title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
title: title,
map: map
});
google.maps.event.addListener(marker, 'click', function(event) {
marker.setMap(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
working example
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);
});
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);
}
The default infoWindow size is way too big for me. I want it to be much smaller can I can't figure out how to do it. I've tried setting a maxWidth parameter on my infoWindow constructor like this
var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
and setting the CSS width like this
<style type="text/css">
#infoWindow {
width: 10px;
}
</style>
but that only seems to change the size of the text wrapping, not the actual box. How do I change the size of the infoWindow box?
Here is my code.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style type="text/css">
#infoWindow {
width: 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var demoCenter = new google.maps.LatLng(41,-87);
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
function addMarkers()
{
var marker, i;
var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var contentString = '<div id="infoWindow">'
+'<div id="bodyContent">'
+'<p>'
+ "This location is:<br>"
+ marker.title
+'</p>'
+'</div>'
+ '</div>';
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
The native infoWindow has a minimum size. If it is to big for you, you need to look at using an alternative solution like infoBubble or InfoBox
your CSS section doesn't do anything because var infoWindow is not the same as <div id="infoWindow">
The documentation says:
maxWidth: Maximum width of the infowindow, regardless of content's width. This value is only considered if it is set before a call to
open. To change the maximum width when changing content, call close,
setOptions, and then open.
Also what Larry, (geocodezip), said. (he types faster than me) ;-)