You are not logged in.
Pages: 1
hi hope someone can help me I am using the example of RIGHT CLICK MENU ON but do not know how to add information (info window) title, dates, etc. only thing eh ah been able to insert the following.
{Action: 'addMarkers'
options: {
icon: new google.maps.MarkerImage ('http://maps.gstatic.com/mapfiles/icon_green.png')
}
markers: [
{lat: 19.337535, lng: -99.18411, data: 'Hello!'}
{lat: 19.362045, lng: -99.125056, data: 'Plok!'}
{lat: 19.482776, lng: -99.183455, data: 'Opsss!'}
]
}
marker but only shows me the information I teach.
how I can insert information on the marker?
this are the code complet...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="gmap3.min.js"></script>
<style>
#container{
position:relative;
height:700px;
}
#directions{
position:absolute;
width: 23%;
right:1%;
height: 690px;
overflow:auto;
}
#googleMap{
border: 1px dashed #C0C0C0;
width: 75%;
height: 700px;
}
#menu{
background-color: #FFFFFF;
width:300px;
height:150px;
padding:0px;
border:1px;
cursor:pointer;
border-left:1px solid #cccccc;
border-top:1px solid #cccccc;
border-right:1px solid #676767;
border-bottom:1px solid #676767;
}
#menu .item{
font-family: arial,helvetica,sans-serif;
font-size: 12px;
text-align:left;
line-height: 30px;
border-left:0px;
border-top:0px;
border-right:0px;
padding-left:30px;
background-repeat: no-repeat;
background-position: 4px center;
}
#menu .item.itemA{
background-image: url(images/icon_greenA.png);
}
#menu .item.itemB{
background-image: url(images/icon_greenB.png);
}
#menu .item.zoomIn{
background-image: url(images/zoomin.png);
}
#menu .item.zoomOut{
background-image: url(images/zoomout.png);
}
#menu .item.centerHere{
background-image: url(images/here.png);
}
#menu .item.hover{
background-color: #d6e9f8;
}
#menu .item.separator{
border-bottom:1px solid #cccccc;
}
</style>
<script type="text/javascript">
/**************************************************
* Menu
**************************************************/
///////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
function Menu($div){
var that = this,
ts = null;
this.$div = $div;
this.items = [];
// create an item using a new closure
this.create = function(item){
var $item = $('<div class="item '+item.cl+'">'+item.label+'</div>');
$item
// bind click on item
.click(function(){
if (typeof(item.fnc) === 'function'){
item.fnc.apply($(this), []);
}
})
// manage mouse over coloration
.hover(
function(){$(this).addClass('hover');},
function(){$(this).removeClass('hover');}
);
return $item;
};
this.clearTs = function(){
if (ts){
clearTimeout(ts);
ts = null;
}
};
this.initTs = function(t){
ts = setTimeout(function(){that.close()}, t);
};
}
// add item
Menu.prototype.add = function(label, cl, fnc){
this.items.push({
label:label,
fnc:fnc,
cl:cl
});
}
// close previous and open a new menu
Menu.prototype.open = function(event){
this.close();
var k,
that = this,
offset = {
x:0,
y:0
},
$menu = $('<div id="menu"></div>');
// add items in menu
for(k in this.items){
$menu.append(this.create(this.items[k]));
}
// manage auto-close menu on mouse hover / out
$menu.hover(
function(){that.clearTs();},
function(){that.initTs(3000);}
);
// change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
if ( event.pixel.y + $menu.height() > this.$div.height()){
offset.y = -$menu.height();
}
if ( event.pixel.x + $menu.width() > this.$div.width()){
offset.x = -$menu.width();
}
// use menu as overlay
this.$div.gmap3({
action:'addOverlay',
latLng: event.latLng,
content: $menu,
offset: offset
});
// start auto-close
this.initTs(5000);
}
// close the menu
Menu.prototype.close = function(){
this.clearTs();
this.$div.gmap3({action:'clear', name:'overlay'});
}
/**************************************************
* Main
**************************************************/
$(function(){
var $map = $('#googleMap'),
menu = new Menu($map),
current, // current click event (used to save as start / end position)
m1, // marker "from"
m2, // marker "to"
center = [19.4326077, -99.133208];
// update marker
function updateMarker(marker, isM1){
if (isM1){
m1 = marker;
} else {
m2 = marker;
}
updateDirections();
}
// add marker and manage which one it is (A, B)
function addMarker(isM1){
// clear previous marker if set
var clear = {action:'clear', name:'marker', tag:''};
if (isM1 && m1) {
clear.tag = 'from';
$map.gmap3(clear);
} else if (!isM1 && m2){
clear.tag = 'to';
$map.gmap3(clear);
}
// add marker and store it
$map.gmap3({
action:'addMarker',
latLng:current.latLng,
options:{
draggable:true,
icon:new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green' + (isM1 ? 'A' : 'B') + '.png')
},
tag: (isM1 ? 'from' : 'to'),
events: {
dragend: function(marker){
updateMarker(marker, isM1);
}
},
callback: function(marker){
updateMarker(marker, isM1);
}
});
}
// function called to update direction is m1 and m2 are set
function updateDirections(){
if (!(m1 && m2)){
return;
}
$map.gmap3({
action:'getRoute',
options:{
origin:m1.getPosition(),
destination:m2.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function(results){
if (!results) return;
$map.gmap3({ action: 'setDirections', directions:results});
}
});
}
// MENU : ITEM 1
menu.add('Dirección hasta aquÃ', 'itemB',
function(){
menu.close();
addMarker(false);
});
// MENU : ITEM 2
menu.add('Dirección desde aquÃ', 'itemA separator',
function(){
menu.close();
addMarker(true);
})
// MENU : ITEM 3
menu.add('Zoom Agrandar', 'zoomIn',
function(){
var map = $map.gmap3('get');
map.setZoom(map.getZoom() + 1);
menu.close();
});
// MENU : ITEM 4
menu.add('Zoom Minimizar', 'zoomOut',
function(){
var map = $map.gmap3('get');
map.setZoom(map.getZoom() - 1);
menu.close();
});
// MENU : ITEM 5
menu.add('Centrar AquÃ', 'centerHere',
function(){
$map.gmap3('get').setCenter(current.latLng);
menu.close();
});
// INITIALIZE GOOGLE MAP
$map.gmap3(
{ action: 'init',
options:{
center:center,
zoom: 12
},
events:{
rightclick:function(map, event){
current = event;
menu.open(current);
},
click: function(){
menu.close();
},
dragstart: function(){
menu.close();
},
zoom_changed: function(){
menu.close();
}
}
},
// add direction renderer to configure options (else, automatically created with default options)
/////////////////////////////////////////////HERE IS THE CODE THAT I PUT /////////////////////////////////////////////////////////////////////////////
{ action: 'addMarkers',
options: {
icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png')
},
markers:[
{lat:19.337535, lng:-99.18411, data:'hola !'},
{lat:19.362045,lng:-99.125056, data:'plok !'},
{lat:19.482776,lng:-99.183455, data:'opsss!'}
],
},
[/color]
{ action:'addDirectionsRenderer',
preserveViewport: true,
markerOptions:{
visible: false
}
},
// add a direction panel
{ action:'setDirectionsPanel',
id : 'directions'
}
);
});
</script>
</head>
<body>
<div id="container">
<div id="directions"></div>
<div id="googleMap"></div>
</div>
</body>
</html>
Offline
Hello everyone and thanks for reading my message, I found the solution to my problem and the magic of it all was:
events: {
mouseover: function (marker, event, data) {
var map = $ (this). gmap3 ('get')
infowindow = $ (this). gmap3 ({action: 'get', name: 'infowindow'});
if (infowindow) {
infowindow.open (map, marker);
infowindow.setContent (data);
Else {}
$ (this). gmap3 ({action: 'addinfowindow', anchor: marker, options: {content:''}});
}}}
the full code part--------
{ action: 'addMarkers',
markers:[
{lat:19.337535, lng:-99.18411, data:'texttttttt'},
{lat:19.362045,lng:-99.125056, data:' textttttttttt'},
{lat:19.482776,lng:-99.183455, data:'textttttttt'}
],
options: {
icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png')
},
/////////////////////////////////////the nice part the code to show info window/////////////////////////
events:{
mouseover: function(marker, event, data){
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({action:'get', name:'infowindow'});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(data);
} else {
$(this).gmap3({action:'addinfowindow', anchor:marker, options:{content:''}});
}}}
},
Offline
Pages: 1