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!
Related
I just can't understand why this simple example of MarkerManager shows no marker. I am opening a map at a center point and then adding one marker to the marker manager. When the map initializes there is no marker.
What am I missing?
Thanks, Rick
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
<script type="text/javascript">
var map;
var mgr;
function initialize() {
center = new google.maps.LatLng(40.1352891590710, -105.1035852680550)
var myOptions = {
zoom: 18,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
var marker = new google.maps.Marker({
position: center,
title: 'marker'
});
mgr.addMarker(marker);
mgr.refresh();
mgr.show();
alert(mgr.getMarkerCount(18));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="height: 800px;"></div>
</body>
</html>
The documentation tells me that addMarker takes two arguments:
addMarker(marker:Marker, minZoom:Number, opt_maxZoom:Number) | None | Add a single marker to the map.
change the call in your code to:
mgr.addMarker(marker, 0);
My Google map works okay but the mouseover and mouseout are not showing the div. Can anyone see my mistake or what I have done wrong? I have jquery installed on my host server.
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="jquery/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var mapOptions = {
zoom: 12,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var marker_0 = new google.maps.Marker({
position:LatLng,
map:map,
descrip:contentstring,
link:'https://www.google.ie/'
})
google.maps.event.addListener(marker_0,'mouseover',function(){
tooltip.show(this.descrip);
});
google.maps.event.addListener(marker_0,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker_0,'click',function(){
window.open(this.link);
});
}
$(document).ready(function(){
initialize();
})
</script>
</head>
<body>
<div id="map-canvas" style="width:600px;height:400px;border:solid 1px red;"></div>
</body>
</html>
Thanks in advance for any help.
From the code above, It doesn't look like you have defined the variable 'tooltip'
Instead of passing descrip and link properties to your marker_0, try just passing the title and it works. Like this...
function initialize() {
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var mapOptions = {
zoom: 12,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';
var marker_0 = new google.maps.Marker({
position:LatLng,
map:map,
title: contentstring
//descrip:contentstring,
//link:'https://www.google.ie/'
})
/*
** HAVE COMMENTED THIS BIT OUT AS THE MARKER ABOVE WILL WORK AS A TOOL TIP **
google.maps.event.addListener(marker_0,'mouseover',function(){
tooltip.show(this.descrip);
});
google.maps.event.addListener(marker_0,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker_0,'click',function(){
window.open(this.link);
}); */
}
There is a Simple Marker Exmaple Here
The properties that can be used for the marker is listes in the DOCS.
Hope this helps.
ALL
i wanna developing window contains map and allow user to mark his location and get longitude and latitude based on the marked location
any one has a suggestion ?
you can use google map v3 for this purpose..
Try this code, it creates a marker where the user clicks on the map
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
you will be requried to use maps click event to get lat/lag.
check below code for same.
GEvent.addListener(map, "click", function(overlay, latLng)
{
// display the lat/lng in your form's lat/lng fields
document.getElementById("latFld").value = latLng.lat();
document.getElementById("lngFld").value = latLng.lng();
//code for adding marker
//post/ajax call to save location in Database
});
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.
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>