Home : Forums : Authoring and Programming : customize the pop up window

customize the pop up window

You are currently not logged in. You can view the forums, but cannot post messages.

28-Feb-12 17:16

Delete

Edit

chrisis

No stars yet

Posts: 4

Hi all I've just created this pop up window but i really don't know how to customize it...i would like to know how:

change the border radius (20px)

windows weight 300px

ang give some margin at the text inside

any suggestion

this is my code

thanks

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function load(){

var point = new google.maps.LatLng(19.725342, 102.524414);

var myMapOptions = {
zoom: 5,
center: point,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById("map"),myMapOptions);

var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Project</h2>'+
'<div id="bodyContent">'+
'<p><b>Project</b> Hello world</p>'+
'<p>Attribution: Project, <a href="http:www.edgarallanpoets.com">'+
'http://www.edgarallanpoets.com</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});

var image = new google.maps.MarkerImage(
'marker-images/image.png',
new google.maps.Size(100,115),
new google.maps.Point(0,0),
new google.maps.Point(50,115)
);

var shadow = new google.maps.MarkerImage(
'marker-images/shadow.png',
new google.maps.Size(160,115),
new google.maps.Point(0,0),
new google.maps.Point(50,115)
);

var shape = {
coord: [60,0,68,1,72,2,75,3,78,4,80,5,82,6,84,7,86,8,87,9,88,10,90,11,91,12,92,13,93,14,93,15,94,16,95,17,96,18,96,19,97,20,97,21,97,22,98,23,98,24,99,25,99,26,99,27,99,28,99,29,99,30,99,31,99,32,99,33,99,34,99,35,99,36,99,37,99,38,99,39,99,40,99,41,98,42,98,43,98,44,98,45,97,46,97,47,97,48,97,49,96,50,96,51,95,52,95,53,95,54,95,55,94,56,94,57,93,58,93,59,93,60,92,61,92,62,91,63,91,64,90,65,90,66,89,67,89,68,89,69,88,70,87,71,87,72,86,73,86,74,85,75,85,76,84,77,84,78,83,79,82,80,82,81,81,82,80,83,80,84,79,85,78,86,78,87,77,88,76,89,75,90,75,91,74,92,73,93,72,94,72,95,71,96,70,97,69,98,68,99,68,100,67,101,66,102,65,103,64,104,64,105,63,106,61,107,61,108,59,109,58,110,56,111,54,112,51,113,5,114,4,114,46,113,44,112,42,111,40,110,39,109,38,108,37,107,36,106,35,105,34,104,33,103,32,102,32,101,31,100,30,99,29,98,28,97,28,96,27,95,26,94,25,93,25,92,24,91,23,90,22,89,22,88,21,87,20,86,20,85,19,84,18,83,18,82,17,81,17,80,16,79,15,78,15,77,14,76,14,75,13,74,13,73,12,72,11,71,11,70,10,69,10,68,9,67,9,66,8,65,8,64,7,63,7,62,6,61,6,60,6,59,5,58,5,57,4,56,4,55,4,54,3,53,3,52,3,51,2,50,2,49,2,48,1,47,1,46,1,45,1,44,1,43,0,42,0,41,0,40,0,39,0,38,0,37,0,36,0,35,0,34,0,33,0,32,0,31,0,30,0,29,0,28,0,27,0,26,1,25,1,24,1,23,2,22,2,21,2,20,3,19,3,18,4,17,5,16,5,15,6,14,7,13,8,12,9,11,10,10,12,9,13,8,15,7,17,6,19,5,21,4,24,3,27,2,31,1,37,0,60,0],
type: 'poly'
};

var marker = new google.maps.Marker({
draggable: true,
raiseOnDrag: false,
icon: image,
shadow: shadow,
shape: shape,
map: map,
position: point
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

}

</script>

</head>
<body onLoad="load()">
<div id="map" style="width:600px;height:400px;margin:5px auto;"></div>

</body>
</html>

01-Mar-12 05:10

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@chrisis: Try this:

http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infobox.js

Also:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

01-Mar-12 15:00

Delete

Edit

chrisis

No stars yet

Posts: 4

thanks Matt for your answer...I tryed already to use this souces to solve my problem...but I can't understand what to do

i think i have to inset variables or options here:

var infowindow = new google.maps.InfoWindow({
content: contentString
});

but I don't know how... I tryed many times but nothing...

i just need to know how to enter the size of the window and if is possible to give a border-radius

if you someone could help me because I heaven't enogh knowledge...to understand form the code...

i need to see an exmple with the same names to understand