i have these two lines
map.panTo(respectiveMarker.getPosition());//Center in map the respective marker
infoWindow.open(map, respectiveMarker);
When infoWindow.open is executed the map pans to the edge.
If i remove this line the map pans to the marker as expected.
Any ideas?
Since you're using the v3 API you could simply prevent the infoWindow from shifting the map with the disableAutoPan option.
Complete example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps disableAutoPan Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 200px; height: 200px"></div>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(37.44, -122.14);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: 'Test',
disableAutoPan: true
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Test Marker'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
</script>
</body>
</html>
Screenshot:
There is no equivalent to the disableAutoPan in the v2 API's GInfoWindowOptions, and I am not aware of any workarounds for this.
Related
I'm trying to create a multiple markers map. Every marker will have his infoWindow. I followed all the dev GoogleMaps information and infoWindow are still not appearing.
In this code that I'll give to you, I only create 3 markers with my own function "PintaMarker". This function creates a marker and adds its listener with the infowindow information and pushes the marker to my "markers Array" called markers.
When I finish the creation of the markers, I generate a MarkerClusterer to use and see all markers I create.
Can anyone take a look at my code and give me a hand on it?
<!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" xml:lang="ca" lang="ca">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Markers Map</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--script src="js/bootstrap.js"></script-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
</head>
<body>
<div id="map1" style="width:100%; height: 913px"></div>
</body>
<script>
var markers = [];
var map1=null;
var geocoder;
var infowindow = new google.maps.InfoWindow();
function pintaMarker(lat,lng,html){
var myLatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map1,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.setOptions({
content: html
});
infowindow.open(map1,marker);
console.log(infowindow);
});
markers.push(marker);
}
$(document).ready(function() {
//var center = new google.maps.LatLng(41.644183,1.620483);
geocoder = new google.maps.Geocoder();
var center = new google.maps.LatLng(41.38257066,2.15659028);
var options = {
zoom: 16,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map1 = new google.maps.Map(document.getElementById("map1"), options);
pintaMarker(41.385, 2.154, 'hola');
pintaMarker(41.387, 2.1529, 'hola2');
pintaMarker(41.38254, 2.1562, 'hola3');
var markerCluster = new MarkerClusterer(map1, markers);
});
</script>
</html>
Thank you!
The porblem ist that in your function pintaMarkerthe map1 object is null!!
The solution:
Pass the map object as a parameter to your pintaMarker like this:
pintaMarker(41.385, 2.154, 'hola', map1);
and update you function to:
function pintaMarker(lat,lng,html, map1){
var myLatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map1,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.setOptions({
content: html
});
infowindow.open(map1, marker);
console.log(infowindow);
});
markers.push(marker);
}
now the map object is available!
I have a simple google map with markers and infowindows (like in example at Google Maps API documentation:
<html>
<meta charset="utf-8" />
<style>
.redtext {
color: red;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">click me<P class="iwtext">Hello world!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function aclick(){
$(".iwtext").toggleClass("redtext");
}
</script>
<body onload="initialize()">
<div id="map-canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
If you try this, you will see an info window after click on a marker with link (click me) and text - Hello world. If you click on a link, text become red.
But if you close infowindow, clicking on a [X], and then open it again, you will see, that text become black again, the same problem if you click again on a marker.
Is there any ways to solve this problem with rewriting content in a infowindow?
I solve it like like this:
function aclick(){ $(".iwtext").toggleClass("redtext"); contentString = '<div id="content">' + $("#content").html() + "</div>"; infowindow.setContent(contentString); }
For some reason whenever i try to use a custom markerimage for my map, it just displays the default. Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API v3 Example: Marker Simple</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type=
"text/javascript"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882,131.044922),
map: map,
title: 5,
icon: new google.maps.MarkerImage('http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
new google.maps.Size(24, 24),
new google.maps.Point(0,0),
new google.maps.Point(0, 24))
});
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 780px; height: 480px"></div>
</body>
</html>
The problem is in your title option, that must be a string. So replace it by "5" and it will work !
See demo : http://jsbin.com/uwudab/1/edit
Message: '_e3' is null or not an object
Line: 19
Char: 1068
Code: 0
URI: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/6/6/main.js
I really have no clue on javascript and this is someone elses code, but does anyone know why it causes the above error in internet explorer?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;
google.maps.event.addListener(marker, 'drag', function(event){
document.getElementById("latbox").value = event.latLng.lat();
document.getElementById("lngbox").value = event.latLng.lng();
});
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: parliament
});
google.maps.event.addListener(marker, 'drag', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
document.getElementById("latbox").value=marker.getPosition().lat();
document.getElementById("lngbox").value=marker.getPosition().lng();
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
Lat:<input type="text" id="latbox" name="latbox" style="width:100px;" >
<br>
Long:<input type="text" id="lngbox" name="lngbox" style="width:100px;" >
</body>
</html>
If you open IE's developer tools, change to the script tag, and start debugging, then when the page refreshes and the error occurs, the developer tools will show a call stack headed by your call to add a listener to the drag event of a marker, and the __e3_ being referenced is a property of the marker, but you have not created the marker.
Move the addListener(marker ... call to within the initialize() function, after you've created the marker.
Using Google Maps API v3.
I noticed that if I have a map marker near the edge of my map border ... that if I click the
marker icon so that the InfoWindow will display, my entire map shifts so that the
markers InfoWindow is centered.
I don't want my map to shift.
Question: How do I prevent the map from shifting when InfoWindows are near the end of the map border (which causes the InfoWindow by default to center & shift the map)?
Since you are using v3, you can simply prevent the infoWindow from shifting the map with the disableAutoPan option, as in the following example (API Reference):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps disableAutoPan Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 200px; height: 200px"></div>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(37.44, -122.14);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: 'Test',
disableAutoPan: true
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Test Marker'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
</script>
</body>
</html>
Screenshot:
There is a property called [disableAutoPan] of agm-marker-info, making it false will not shift your map InfoWindows which are located near the edge of map border.
<agm-marker-info [disableAutoPan]="false">
<b> Marker Info: "A" </b>
</agm-marker-info>