I am using google maps API V2 and i need to open a fancybox, from within an infowindow.
I tried this(but didnt work):
GEvent.addListener(marker1, "click", function() {
var cnt = '<div> <a id="fancybox" href="http://www.google.com/">Link</a></div>';
marker1.openInfoWindowHtml(cnt);
});
I dont understand why it does not work, because when i do the same but not as a parameter(just in a link somewhere in the page), it works:
<a id="fancybox" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
To add the fancy box plugin i use this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fancybox").fancybox();
});
</script>
So as you see, the problem is that when calling the fancy box, from within openInfoWindowHtml(), it doesnt work.
Ill appreciate some help.
map is now on the link: http://joostudio.info/test/
As you can see, from bottom image fancybox works just fine but when I call it from map infowindow it jus doesn't work.
Here is complete page source code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function runmap() {
var myLatlng = new google.maps.LatLng(43.154541,19.12315);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow({});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.145086,19.090633),
});
google.maps.event.addListener(marker1, "click", function () {
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>');
infowindow.open(map, marker1);
});
}
</script>
</head>
<body onload="runmap()">
<div id="map_canvas" style="width: 972px; height: 500px"></div>
</br>
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
</body>
</html>
How can I simply call fancybox from google maps v3 marker?
Thanks a lot
I think your problem is that the html including your link displayed in infowindow does not "exist" at the time you setup the fancybox.
I think you can solve this problem by providing a DOM node instead of string with HTML. Simply create a hidden div with your link, you want to display and it should work.
Ran into to a similar problem myself, it's very hard to get an event to stick to an element inside a Google Maps, I tried both Fancybox and Colorbox but I got the same result on both. My solution to this was to use and good old onclick directly on the element, so something like:
link
Hope this solves your issue.
Related
HERE map doesn't load on page load, it only shows the HERE logo and copyright, but it loads with a function on clicking a button. The below code is slightly adapted from the HERE docs (https://developer.here.com/documentation/maps/3.1.30.3/dev_guide/topics/map-controls-ui.html). I want the map loaded with the page, not after clicking a button. What am I missing?
<div id="map" style="height: 400px; width: 100%;"></div>
$(function() {
let platform = new H.service.Platform({
'apikey': api_key
});
loadMap ({
lat: <?php echo round($obj->getLatitude(), 4); ?>,
lng: <?php echo round($obj->getLongitude(), 4); ?>
});
function loadMap (position) {
let defaultLayers = platform.createDefaultLayers();
let map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
zoom: 16,
center: position,
}
);
});
});
[EDIT]
I've been struggling for days trying to figure out why the map wouldn't load with the very basic code example. And I accidentally closed the browser Development console and the map appeared all of a sudden! What the?!...
So the problem is the map won't appear on page load until the window is resized. So what can I do to trigger that to make the map to appear?
It seems the code for browser is generated by PHP backend.
You need double check what is generated. It seems that map container
<div id="map" style="height: 400px; width: 100%;"></div>
is not ready in HTML DOM but the script is already started.
Please compare a result document(that generated by PHP-backend) with follow structure:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div id="map" style="height: 400px; width: 100%;"></div>
<script>
Your script here! - It should be latest element of body-element
</script>
</body>
</html>
I´m using leaflet on meteor but its only showing a blank (grey) map without displaying the map tiles. when I test the script locally in a single html file its working.
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
test
<div id="map" style="height: 180px;"></div>
123
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("some text :)");
</script>
</body>
</html>
but its not working when I try to do it in meteor.
my meteor setup:
I have a main.html where I declare some CDNs:
<head>
<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css"/>
</head>
I also use iron:router to route. so there is a map.html with a map template where I only have my
<div id="map"></div>
I also have setup my #map{height: 180px;} in my stylesheet.
So now I have to run the script with some javascript with my Template.map.rendered function
Template.map.rendered = function () {
var map = L.map('map').setView([51.505, -0.09], 13);
L.Icon.Default.imagePath = "/images/leaflet/";
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("some text :)");
};
But it will not work. What is causing the blank map error? my browser console is not showing any error.
ok I figured out what was the problem. I have a reset.css where I have some reset rules for my UI.
this line was producing the error:
div, a, p, img, blockquote, form, fieldset, textarea, input, label, iframe, code, pre {
some stuff,
some stuff,
overflow:hidden; <---------
}
so it looks like leaflet don´t like divs with overflow:hidden option
I am working with Google Maps and I want to load the map in an external file, where I can use jQuery to set up the rest of the page.
I have made three changes to the Hello World example: I've included jQuery, I've initialised the map in an external file, and I've removed the onload event in the <body> tag. And I now have a blank screen where there used to be a map, and no console errors to give me a clue.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="./js/jquery.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
<script src="./js/maps.js"></script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is maps.js in full:
$(document).ready(function () {
console.log('document ready');
function initializeMap() {
console.log('initialize');
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
initializeMap();
});
I don't see any of the console statements. I also don't see a map - just a blank screen.
I must be doing something stupid, but what is it?
You're missing an </script> after src="http://maps.googleapis.com/maps/api/js?sensor=true">
map is now on the link: http://joostudio.info/test/
As you can see, from bottom image fancybox works just fine but when I call it from map infowindow it jus doesn't work.
Here is complete page source code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function runmap() {
var myLatlng = new google.maps.LatLng(43.154541,19.12315);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow({});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(43.145086,19.090633),
});
google.maps.event.addListener(marker1, "click", function () {
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>');
infowindow.open(map, marker1);
});
}
</script>
</head>
<body onload="runmap()">
<div id="map_canvas" style="width: 972px; height: 500px"></div>
</br>
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
</body>
</html>
How can I simply call fancybox from google maps v3 marker?
Thanks a lot
The problem is your have given your FancyBox link in your infowindow a class instead of an id
infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg">
<img src="fancybox/example/1_s.jpg" alt=""/></a>')
yet you are calling it via an id
<script type="text/javascript">
$(document).ready(function() {
$("a#fb").fancybox();
});
</script>
The reason the bottom image works is you are using an id there
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
look for link below:
Google map + fancybox
http://www.daimlerstr.de/berge/tests/fancyboxtest.html
I have the following piece of code to display map in my test web page
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAvY_htg5RzYE1oj2BL4bFvxSRc9RmgUY0ng1PT46gfsZ_uuISzxROX5ZCo6sw1juxfGN03mgyAPAIoA" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(xxx,xxx), 13);
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("xxxxxxxxxxxx");
});
map.addOverlay(marker);
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 300px; height: 250px; margin:auto;"></div>
</body>
</html>
I want to redirect to GOOGLE MAP site with exact address location which i used to display Location in Map IF I CLICK ON MAP LOCATION.Hope you understand my requirement. Is it possible?
you could try something like
function returnMapUrl(GLatLngObj){
var point= GLatLngObj || map.getCenter();
return "http://maps.google.com/?ll="+point.lat+','+point.lng;
}
GEvent.addListener(map,"click", function(overlay, latlng) {
window.location = returnMapUrl(latlng);
});