Google Maps API - Activating the infowindow of a custom marker - google-maps

I am trying to activate the infowindow for a custom marer, yielding a small description about the marker, I'm having some trouble at the moment, I have the custom marker working but I can't get the infowindow to show.
I tried calling the listener for the marker and storing it in a variable "customMarker", then calling another mouseover listener to activate the infowindow, but I'm having no luck, can anyone help me out?
var map;
//Creates a custom icon to be placed on the map
var goldStar = 'https://cdn2.iconfinder.com/data/icons/august/PNG/Star%20Gold.png';
function initialize() {
//Sets the zoom amount for the map, the higher the number, the closer the zoom amount
var mapOptions = {
zoom: 18
//center : myLatLng
};
//The map object itself
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Tries to find user location using HTML 5
if(navigator.geolocation)
{
//sets the map to the position of the user using location
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
//This listener is not working
//google.maps.event.addListener(customMarker, 'mouseover', function() {
//infowindow.open(map,customMarker);
//});
}
function placeMarker(location, map)
{
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable:true
});
map.panTo(location);
}

The google.maps.event.addListener function does not return a marker. This won't work:
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
Assign the event listener in your placeMarker function to the marker you create (also gives the advantage of maintaining function closure on the marker):
function placeMarker(location, map) {
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable: true
});
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
map.panTo(location);
}
working fiddle

Related

How to show info window?

Hi guys been trying my best to solve this problem. I can't see info window even after clicking the marker
<script type="text/javascript">
function initialize() { //Initalize JS after onload
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var randomPoint0 = new google.maps.LatLng(18.9750, 72.8258); //First Location
var marker0 = new google.maps.Marker({ //Set up marker
position: randomPoint0,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid0'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker0.getPosition());
});
var randomPoint1 = new google.maps.LatLng(19.8833, 76.7833); //First Location
var marker1 = new google.maps.Marker({ //Set up marker
position: randomPoint1,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker1.getPosition());
});
var randomPoint2 = new google.maps.LatLng(25.6000, 85.1167); //First Location
var marker2 = new google.maps.Marker({ //Set up marker
position: randomPoint2,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid2'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker2.getPosition());
});
var randomPoint3 = new google.maps.LatLng(18.5333, 73.8667); //First Location
var marker3 = new google.maps.Marker({ //Set up marker
position: randomPoint3,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker3.getPosition());
});
var randomPoint4 = new google.maps.LatLng(22.3000, 70.7833); //First Location
var marker4 = new google.maps.Marker({ //Set up marker
position: randomPoint4,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid4'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker4.getPosition());
});
var randomPoint5 = new google.maps.LatLng(17.8625, 78.886); //First Location
var marker5 = new google.maps.Marker({ //Set up marker
position: randomPoint5,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid5'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker5.getPosition());
});
var randomPoint6 = new google.maps.LatLng(13.0833, 80.2833); //First Location
var marker6 = new google.maps.Marker({ //Set up marker
position: randomPoint6,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid6'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker6.getPosition());
});
var randomPoint7 = new google.maps.LatLng(28.6167, 77.2167); //First Location
var marker7 = new google.maps.Marker({ //Set up marker
position: randomPoint7,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid7'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker7.getPosition());
});
var randomPoint8 = new google.maps.LatLng(19.9833, 73.8000); //First Location
var marker8 = new google.maps.Marker({ //Set up marker
position: randomPoint8,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid8'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker8.getPosition());
});
var randomPoint9 = new google.maps.LatLng(30.7343, 76.7933); //First Location
var marker9 = new google.maps.Marker({ //Set up marker
position: randomPoint9,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid9'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker9.getPosition());
});
var randomPoint10 = new google.maps.LatLng(22.5697, 88.3697); //First Location
var marker10 = new google.maps.Marker({ //Set up marker
position: randomPoint10,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid10'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker10.getPosition());
});
map.setCenter(marker0.getPosition());
map.setZoom(5);
var info = message;
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
}
</script>
this is my link
http://www.safarikidindia.com/safari-map.php#
All the marker pins are dynamic so how I can show address text, can you please advice
You need to had an infoWindow for each marker!
Supposing you have 10 different messages, stored in 10 variables (message0, message1, message2,...), you should write:
var infoWindow0 = new google.maps.InfoWindow({
content: message0
});
google.maps.event.addListener(marker0, 'click', function () {
infoWindow0.open(map, marker0);
});
var infoWindow1 = new google.maps.InfoWindow({
content: message1
});
google.maps.event.addListener(marker1, 'click', function () {
infoWindow1.open(map, marker1);
});
var infoWindow2 = new google.maps.InfoWindow({
content: message2
});
google.maps.event.addListener(marker2, 'click', function () {
infoWindow2.open(map, marker2);
});
...(and so on until marker10)

Google maps v3 open infowindow on load

I using this technique: http://www.geocodezip.com/v3_MW_example_map2.html
I want to have the first info window open when the map loads.
I also want to be able to center the map when you click a location link.
Can anyone help?
JS:
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var map = null;
function initialize() {
// create the map
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(50.822096, -0.375736),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up three markers with info windows
// add the points
var point = new google.maps.LatLng(50.810438, -0.374925);
var center = new google.maps.LatLng(50.810438, -0.374925);
var marker = createMarker(point,"Worthing","<p><b>Worthing</b><br>1-13 Buckingham Road,<br>Worthing,<br>West Sussex,<br>BN11 1TH</p>")
var point = new google.maps.LatLng(51.497421,-0.141604);
var center = new google.maps.LatLng(51.497421,-0.141604);
var marker = createMarker(point,"London","<p><b>London</b><br>Portland House,<br>Bressenden Place,<br>London,<br>SW1E 5RS</p>")
var point = new google.maps.LatLng(-33.867487,151.20699);
var center = new google.maps.LatLng(-33.867487,151.20699);
var marker = createMarker(point,"Sydney","<p><b>Sydney</b><br>Level 1, Cosco House,<br>95-101 Sussex Street,<br>Sydney NSW<br>Australia 2000</p>")
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
$('#side_bar li:first-child').addClass("active");
$('#side_bar li').click(function(){
$('#side_bar li').removeClass("active");
$(this).addClass("active");
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var iconBase = '../Themes/FreshEgg/assets/img/';
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5,
icon: iconBase + 'map_marker_24x46.png',
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
infowindow.setContent(contentString);
infowindow.open(map,marker);
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a></li>';
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML:
<ul class="list-inline" id="side_bar"></ul>
<div id="map_canvas"></div>
Add a 4th parameter to your createMarker() function for the default state of markers - createMarker(latlng, name, html, show) - where show will be a boolean variable: true to open on load, false to leave it closed. Then when you call createMarker() in your initialize() method specify true for the marker you want open on load.
Then in createMarker() add a condition that handles this for you - something like:
if (show) {
google.maps.event.trigger(marker, "click");
/*if you're going to take this approach, make sure this is triggered after
*you specify your listener
*alternately, you can also setContent() and open() your infoWindow here
*/
}
To have the map pan to the center when you click on the marker, you first need to disable the auto panning of the map when an infoWindow is open. This can be done where you set the options for your infoWindow:
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
disableAutoPan : true
});
Then, in your listener for the click event on the marker add the function to panTo(LatLng) the position of the marker on your map.
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
map.panTo(marker.getPosition());
});

Show all infowindows open

I'm trying to have custom infowindows float above markers, however I noticed that only one marker can be opened at any one time. Is there a workaround to this?
Here's the code I have produced at the moment:
downloadUrl("AllActivityxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("venue_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))
);
var infowindow = new google.maps.InfoWindow();
var html = "<b>" + point + "</b>hello <br/>" + type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map,marker);
});
}
});
And when you check this map, notice that I cannot open more than 2 infowindows at once. Why is that?
There is no limitation implicit to the Google Maps API v3 that makes only one InfowWindow available at a time. You need to write your code to do that. If you want an InfoWindow for each marker, make one.
Some thing like (not tested):
function createMarker(latlng, html) {
var contentString = html;
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}

Google maps infowindow

I am trying to create listeners for some map markers. I can create the markers and they are on the map but, no matter which marker I click on it tells me "Uncaught TypeError: Cannot call method 'open' of undefined" . When I break at the open code it is showing markers[46] which is one more that the highest index. And it doesnt matter which marker I click on its always the same index.
EDIT: I edited the code and pasted all of it. No errors, but nothing happens when I click a marker. I am looking in Chrome and it looks like there isnt a event handler registered
<script>
var map;
var nav = [];
$(document).ready(function () {
//initialise a map
init();
var infowindow = new google.maps.InfoWindow({});
$.get("xxxxxx.kml", function (data) {
html = "";
//loop through placemarks tags
i = 1;
$(data).find("Placemark").each(function (index, value) {
//get coordinates and place name
coords = $(this).find("coordinates").text();
contentString = $(this).find("description").text();
var partsOfStr = coords.split(',');
var lat = parseFloat(partsOfStr[0]);
var lng = parseFloat(partsOfStr[1]);
var myLatLng = new google.maps.LatLng(lng, lat);
place = $(this).find("name").text();
createMarker(myLatLng, place, contentString, i)
//store as JSON
c = coords.split(",")
nav.push({
"place": place,
"lat": c[0],
"lng": c[1]
})
//output as a navigation
html += "<li>" + place + "</li>";
i++;
});
//output as a navigation
$(".navigation").append(html);
//bind clicks on your navigation to scroll to a placemark
$(".navigation li").bind("click", function () {
panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat)
map.panTo(panToPoint);
})
});
markers = [];
function createMarker(myLatLng, title, contentString, i) {
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: title
});
google.maps.event.addListener(markers, 'click', function () {
infoWindow.setContent(contentString);
infowindow.open(map, markers[i]);
});
markers[i] = marker;
return marker
}
function init() {
//google.maps.event.addDomListener(window, 'init', Initialize);
var latlng = new google.maps.LatLng(39.047050, -77.131409);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
})
This is almost a FAQ. When your loop ends, the value of i is 46 (based on your statement). There is no marker 46, so all the click listeners fail. It can be solved with function closure (a createMarker function which holds the association between the marker and the infowindow contents).
Something like this in your example (not tested), call it from inside your marker creation loop, requires a global markers array, but doesn't require the global infowindow array:
//global markers array
markers = [];
// global infowindow
var infowindow = new google.maps.InfoWindow({});
// createMarker function
function createMarker(myLatLng, title, contentString, i)
{
var marker = new google.maps.Marker({
position: myLatlng ,
map: map,
title:title
});
google.maps.event.addListener(markers, 'click', function() {
infoWindow.setContent(contentString);
infowindow.open(map,markers[i]);
});
markers[i] = marker;
return marker
}

Google Maps API InfoWindow not Displaying content

My Code looks like this:
var map = /*some google map - defined earlier in the code*/;
var geocoder = new google.maps.Geocoder();
var address = 'Some Address, Some Street, Some Place';
geocoder.geocode({'address':address},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var infobox = new google.maps.InfoWindow({
content: 'Hello world'
});
for(i in results){
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('blablabla');
infobox.open(map,marker);
alert(infobox.content); //displays 'blablabla'
});
}
}
});
Basically it's creating some markers on a single map based on a given address-string. It adds an infoWindow to the markers that opens on click.
Problem is: the infoWindow displays empty.
Screenshot here:
PS: Using Maps API V3
I just ran into the same problem, and found the very simple cause of it: The text in the info window was actually displayed, but in white color, and therefore just not visible on the white background. Giving the content a different color via CSS solved the problem for me.
Basically you need to use a function external to your marker adding-loop to add the infobox message to each marker... for an example and detailed explanation see:
http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
Here is how I have done it.
var map,markersArray,infowindow; //infowindow has been declared as a global variable.
function initialize(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.5001524,-0.1262362),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
markersArray = [];
}
function createMarker(latlng, html,zoom) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
return marker;
}
You can find the working example here and the complete javascript here.
I have resolved issue by adding below code.
setTimeout(function () { GeocodeMarker.info.open(GoogleMap,
GeocodeMarker); }, 300);
Thanks