Solved

Google Maps - InfoWindow with Pixeloffset

Posted on 2014-04-05
1
2,841 Views
Last Modified: 2014-04-05
I'm trying to add a pixeloffset to the google maps infowindow but the position of the infowindow will not change when clicked. I can't find out why.

This is the code I'm adding.

   pixelOffset: new google.maps.Size(60, 0),

Open in new window


This is the original code.

function iwHandle(infowindow, map, marker, style) {

	if (infoWindowDivID !== ""){
		externalDiv = document.getElementById(infoWindowDivID);
		externalDiv.innerHTML = infowindow.content;
	} else {
		infowindow.open(map,marker);
		lastInfoWindow = infowindow;
	}
}

Open in new window


function createMarker(latlng, index, html, category, icon, src, title, iconURL) {

    var myHtml;
	if ( icon === undefined ) {
      icon = category;
   }
  if (category == "pin") {

		if (markerGroups["pin"]) {

		for (var i = 0; i < markerGroups["pin"].length; i++) {
		  markerGroups["pin"][i].setMap(null);
		}
		markerGroups["pin"].length = 0;
		}

	  var image = new google.maps.MarkerImage(iconPath + category + ".png",
      new google.maps.Size(mainIconWidth, mainIconHeight),
      new google.maps.Point(0,0),
      new google.maps.Point(mainAnchorPointX, mainAnchorPointY));
	  
	  var shadow = new google.maps.MarkerImage( iconPath + category + "-shadow.png",
      new google.maps.Size(mainIconWidth, mainIconHeight),
      new google.maps.Point(0,0),
      new google.maps.Point(mainAnchorPointX, mainAnchorPointY));

	  var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        shadow: '',
        icon: image
    });
	  markerGroups["pin"].push(marker);
	  var infowindow = new google.maps.InfoWindow({
        content: html
    });
	  google.maps.event.addListener(marker, 'click', function() {
		//map.panTo(latlng);
		controlToggle("hide");
		google.maps.event.addListener(infowindow, 'closeclick', function() {
			controlToggle("show");
		});
		infowindow.open(map, marker);
    });

Open in new window

0
Comment
Question by:seopti
1 Comment
 
LVL 13

Accepted Solution

by:
duncanb7 earned 500 total points
Comment Utility
What is console error showing on browser debugger tool you have ? On chrome browser,
click options->tools->developer tools->console.
Please clean up all javascript syntax error first.
probably you put the line of  pixelOffset: new google.maps.Size(60, 0), without ","
as follows  and try the following portion code change.

var infowindow = new google.maps.InfoWindow({
        content: html,
 pixelOffset: new google.maps.Size(60, 0)
    });

var curmark;
 google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
 curmark = this;
controlToggle("hide");
});
google.maps.event.addListener(infowindow,'closeclick',function(){
curmark.setMap(null); //removes the marker
controlToggle("show"); 
});

Open in new window


If "this" is not working, please try to replace"this" with "marker"
And take a look this link for those option and example if have time
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Hope understant your question completely, if not , please pt it out

Duncan
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now