I am messing around with the Google Maps API and I can't seem to figure out how to add a pop-up within the map that comes up with info after someone clicks on the custom map icon I've added. The code I am using is below and an example is on littlemarketbrasserie.com
Any help would be greatly appreciated.
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 15,
panControl: false,
mapTypeControl: false,
center: new google.maps.LatLng(41.89924, -87.62756),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var image = 'img/lm-logo-maps1.png';
var myLatLng = new google.maps.LatLng(41.89924, -87.62756);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
animation: google.maps.Animation.DROP,
icon: image,
});
var styles = [
{
stylers: [
{ hue: "#ff9f67" },
{ saturation: -20 },
{ gamma: 1.50 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels.text.stroke",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{ visibility: "on" },
{ color: "#ffa066" },
{ lightness: 80 }
]
}
];
map.setOptions({styles: styles});
}
</script>
If you are talking about infowindow
then you can use inside your initialize
function
var popup=new google.maps.InfoWindow({
content: "Hello"
});
google.maps.event.addListener(marker, 'click', function(e) {
// you can use event object as 'e' here
popup.open(map, this);
});
DEMO.
Also if you want to add a custom styled infowindow
then you can take a look at this and this example using jQuery dialog.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With