Inside a infoBubble Google map I have added a function, but the first time the infoBubble is opened, the code not work, and if I open a second infoBubble or close the first and reopen, the code work.
Please help.
This is my page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/infobubble.js"></script>
<script>
var infoBubble = new InfoBubble();
var infowindow = new google.maps.InfoWindow();
var map;
function initialize() {
var config = {
el: 'map',
lat: 40.2329,
lon: -3.42,
zoom: 10,
type: google.maps.MapTypeId.ROADMAP
};
var data = [
['Giorgio Rossi', 40.15, -3.42, '1' ],
['Marta Bianchi', 40.25, -3.42, '2'],
['Carlo Verdi', 40.15, -3.62, '3'],
['Mario Giallo', 40.25, -3.62, '4'],
];
var map = new google.maps.Map(document.getElementById(config.el), {
zoom: config.zoom,
scrollwheel: false,
center: new google.maps.LatLng(config.lat, config.lon),
mapTypeId: config.type
});
var markers = [];
var i ;
for (i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][1], data[i][2]),
map: map
});
marker.info = '<div id="'+data[i][3]+ '">'+data[i][0]+ '</div>';
marker.html = '<div style="padding:25px"><a class="testClass" href="javascript:;" > My Friend '+data[i][3]+'</a> </div>';
google.maps.event.addListener(marker , 'click', function(){
infoBubble.setContent(this.html);
infoBubble.open(map, this);
var prova = this.info;
var found = $(prova).attr('id');
google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
$(".testClass").click(function () {
alert(found);
})
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:700px; height:500px"></div>
</body>
</html>
As you can see from this SO question and the accepted answer
your issue is related to a bug in the infobubble.js code.
More specifically, the placement of the domready trigger was in the wrong part of the code, prior to the asynchronouse setMap() call, instead of after the infobubble elements are added to the DOM in the onAdd() function (which is called after the setMap() function).
What this means is that on your FIRST marker click, at domready event, the elements hadn't yet been added to the DOM - but they were a few milliseconds later - which is why the 2nd marker click worked.
I fixed the domready placement in infobubble.js and created a pull request which has been accepted and is now merged into the official code.
If you update your infobubble.js to the latest commit (use the non-minified for the moment) you'll probably see that your issue is resolved.
Non-working JS Fiddle here using the old code.
Working JS Fiddle here using the new code.
Related
I'm just starting to use Google Maps API and have run into problems with API. I am using code from Good Maps example and it works with Chrome and Firefox but nothing shows up in IE 10.
I've searched topics without help. I have added https://maps.google.com to safe site in IE, tried the v=3.28 trick, also tried meta tags for backwards compatibility, without any success.
Following is my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="map" style="width:100%;height:1200px;"></div>
<script>
function initMap() {
var myLatLng = { lat: 32.681390, lng: -97.108682 };
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 14
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap">
</script>
</body>
</html>
The above markup doesn't show any map in IE 10. I'm unable to move forward. I'm just starting out with this and wanted to use it in an updatepanel in asp.net 4.5. But at the moment, simple html isn't working for me.
Any suggestions?
Thank you.
I would like to use the following google map API snippet in my ASP.net application to retrieve the latitude and longitude of the selected point by the user.
This code show the map same as https://www.google.com/maps/#25.3812696,58.4464073,6z. Instead of the map from '.com', I want to see the map from '.ae'.
That is the map same as https://www.google.ae/maps/#25.3812696,58.4464073,6z. Both maps are from google based on the country.
Is there any way to achieve this ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Location Tracking</title>
</head>
<body>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(24, 54),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
//this part will return the coordinates to the parent page
alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
});
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
With Thanks and Regards,
I played around with javascript map for a little bit and figured out that by adding &languange=ae at the end of the src, you can have a similar effect. Please check out the example for jsfiddle, and try to add language to your code src="http://maps.googleapis.com/maps/api/js?sensor=false&language=ae". Hope that works for you.
I'm trying to do something I thought quite straight forward. Obviously it's not! I use the head.js lib to asynchronously load the Google Maps API :
<!doctype html>
<html>
<head>
<title>Map - Async example</title>
</head>
<body>
<div id="id" style="width:600px;height:400px;"></div>
<script src="header.js" type="text/javascript">
<script type="text/javascript">
head.js('https://maps.googleapis.com/maps/api/js?=3.exp&sensor=false&callback=google_callback');
var google_callback = function ( ) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('id'), mapOptions);
}
</script>
</body>
</html>
But nothing shows up. Any idea/suggestion ?
The closing script-tag for header.js is missing
I'm pretty new to javascript so please be gentle ;)
I'm using Google Maps API V3 and creating a custom control as per this example. It's pretty straight forward as it's the example from Google. What I'm having trouble with though is replacing the .innerHTML with an existing DIV containing javascript.
Ultimately, I'm trying to create a custom control on my Google Map that contains a Google Adsense ad. Normally I would create a div in my HTML after the body tag and that would contain the javascript code for the Google Adsense Ad.
Normally I would use controlText.innerHTML = 'some html goes here'; for the custom control, but in my case I want to use an existing DIV that contains the javascript code for the Google Adsense ad.
I've tried replacing
controlText.innerHTML = 'some html goes here';
with
controlText.innerHTML = document.getElementById("verticalad");
but it just breaks the map. Can anyone suggest what I'm doing wrong? I'm hoping it's pretty straight forward to fix.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Custom Controls</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '4px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
//**********************************************************************//
//Normally this would be controlText.innerHTML = 'some html goes here';
//**********************************************************************//
controlText.innerHTML = document.getElementById("verticalad");
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas');
var mapOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.TERRAIN,
streetViewControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
}
map = new google.maps.Map(mapDiv, mapOptions);
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.LEFT_CENTER].push(homeControlDiv);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%;height:700px;"></div>
//****************************************************************
// This is the div that needs to be in the custom control
//****************************************************************
<div id="verticalad"><script type="text/javascript">adsense code goes here</script></div>
</body>
</html>
Do you want to move the entire verticalad div in to the control or just the contents of verticalad?
If you want to move it, use appendChild instead of innerHTML
controlText.appendChild(document.getElementById("verticalad"));
And if you want the contents, use innerHTML of verticalad
controlText.innerHTML = document.getElementById("verticalad").innerHTML;
I think I had a missing semicolon somewhere because I've managed to get this working..
I did indeed keep the Adsense code intact in a div in the Body of the HTML and then used controlText.innerHTML = document.getElementById("verticalad").innerHTML;
I did still have a further problem whereby the adsense ad doesn't show up in IE but I put a meta tag forcing it to emulate IE7 and it's now working fine.. Not the best solution I know but IE7 works fine. I think the site should look okay in all modern browsers now.
If anyone is interested in seeing the final site, it's at http://www.flighttracker.gleff.com.
Thanks puckhead for your help.
Geoff
I have created my first Google Map API with png overlays (thanks to #andresf for assistance).
This map has multiple png ground overlays adjacent to each other and can be seen at http://www.earthstation.mobi/coverage.htm
Question: How do I set the opacity (transparency?) on each overlay so that I can see the map detail under the overlay? I do not need to adjust this from the webpage, a preset coded into the script will suffice.
The code of the page listed above is:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Earthstation WIMAX Coverage</title>
<script src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-18.975750, 32.669184),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//note to self co-ords are SW and then NE
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-19.000417,30.999583),
new google.maps.LatLng(-17.999583,32.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
oldmap.setMap(map);
var imageBounds2 = new google.maps.LatLngBounds(
new google.maps.LatLng(-19.000417,31.999583),
new google.maps.LatLng(-17.999583,33.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E032.png",imageBounds2);
oldmap.setMap(map);
var imageBounds3 = new google.maps.LatLngBounds(
new google.maps.LatLng(-20.000417,30.999583),
new google.maps.LatLng(-18.999583,32.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS20E031.png",imageBounds3);
oldmap.setMap(map);
var imageBounds4 = new google.maps.LatLngBounds(
new google.maps.LatLng(-20.000417,31.999583),
new google.maps.LatLng(-18.999583,33.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS20E032.png",imageBounds4);
oldmap.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 1000px; height: 600px"></div>
</body>
</html>
Problem solved!
After declaring the var MyOptions, add
var overlayOpts = {
opacity:0.3
}
Then call the variable in the .GroundOverlay call, directly after calling ImageBounds
i.e.
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E031.png",imageBounds, overlayOpts);
oldmap.setMap(map);
This same call is then used in each .groundoverlay call, assuming you want the same opacity setting for each overlay. If not, decalre another var and call that.
Finished product can be seen http://www.eartshtation.mobi/coverage.htm - In Firefox, Ctrl U will show you the source code.
Hope this helps somebody avoid the 3 days I spent searching for this solution!
this solved the same problem in my case - http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm
With the library (http://www.usnaviguide.com/v3maps/js/ProjectedOverlay.js) inside the code you can easily change transparency by overlay.setOpacity()