Google Maps popups for markers

I would like to add a popup message that contains an html link, when a user hovers or clicks on any of the markers.


function mapLoad() {
      if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map"));
           
           
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(54.622978,-2.592773), 5, G_HYBRID_MAP);
      }
      addMyMarkers();
}



var myMarkers = new Array();
myMarkers[myMarkers.length]="SW1A 0AA";// - House of Commons
myMarkers[myMarkers.length]="AB51 5TB";// - aberdeen


function addMyMarkers() {
  for (var i=0;i<myMarkers.length;i++) usePointFromPostcode(myMarkers[i], placeMarkerAtPoint);
}


thank you.
 
LVL 12
pigmentartsAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
No way.

go here

http://mapmaker.donkeymagic.co.uk/

add a few markers

Look at the code (click generate javascript)  - it will give you all you need
I am very sorry I really have no time today to actually do it for you
0
 
Michel PlungjanIT ExpertCommented:
Wow..

Just found this:

http://mapmaker.donkeymagic.co.uk/
0
 
Michel PlungjanIT ExpertCommented:
Continued from here:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22896067.html

you need to put the code back from where you removed itfunction placeMarkerAtPoint(point)
{
      var marker = new GMarker(point,icon);
      map.addOverlay(marker);

 
      for(var i = 0; i < newpoints.length; i++) { // you need the newpoints to hold the lat/long and html
            var point = new GPoint(newpoints[i][1],newpoints[i][0]);
            var popuphtml = newpoints[i][4] ;
            var marker = createMarker(point,newpoints[i][2],popuphtml);
            map.addOverlay(marker);
      }

      
}



I must run. Perhaps someone else can help


0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
pigmentartsAuthor Commented:
thank so far,

if i do that i can not load my markers on load right?
0
 
pigmentartsAuthor Commented:
can i not just add to this? a popup with a static message.  


function addMyMarkers() {
  for (var i=0;i<myMarkers.length;i++) usePointFromPostcode(myMarkers[i], placeMarkerAtPoint);
}
0
 
pigmentartsAuthor Commented:
thanks mplungjan
0
 
Michel PlungjanIT ExpertCommented:
This should work, but the html does not show :(((

Perhaps a new question for someone?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAANeu5HBVpSMf1IKQdqLY8jxT6aN7f90W3WZXcLxBhq_6X8zmk4hTRCqhIfDyqOtRDCwBNb_uuGA6UyA" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAANeu5HBVpSMf1IKQdqLY8jxT6aN7f90W3WZXcLxBhq_6X8zmk4hTRCqhIfDyqOtRDCwBNb_uuGA6UyA" type="text/javascript"></script>
<script type="text/javascript">

var map;
var localSearch = new GlocalSearch();

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);

function usePointFromPostcode(postcode, callbackFunction) {
      
      localSearch.setSearchCompleteCallback(null,
            function() {
                  
                  if (localSearch.results[0])
                  {            
                        var resultLat = localSearch.results[0].lat;
                        var resultLng = localSearch.results[0].lng;
                        myMarkers[postcode].lat=resultLat;
                        myMarkers[postcode].lng=resultLng;
                        callbackFunction(postcode);
                  }else{
                        alert("Postcode '+postcode+' not found!");
                  }
            });      
            
      localSearch.execute(postcode + ", UK");

      
}


function placeMarkerAtPoint(postcode,point)
{
            var point = new GPoint(myMarkers[postcode].lng,myMarkers[postcode].lat); // gpoints are reversed long/lat
        var popuphtml = "<div id=\"popup\">" + myMarkers[postcode].html + "<\/div>";
            var marker = createMarker(point,icon,popuphtml);
            map.addOverlay(marker);
    addMyMarkers(); // do the next
}

function createMarker(point, icon, popuphtml) {
      var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
      var marker = new GMarker(point, icon);
      GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(popuphtml);
      });
      return marker;
}


function setCenterToPoint(point)
{
      map.setCenter(point, 17);
}





function mapLoad() {
      if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map"));
           
           
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(54.622978,-2.592773), 5, G_HYBRID_MAP);
      }
      addMyMarkers();
}





var myMarkers = new Array();
myMarkers["SW1A 0AA"]={html : "The House of Commons" };
myMarkers["AB51 5TB"]={html : "Aberdeen" };
myMarkers["ST6 6QG"] ={html : "Somewhere else"};
var myPostCodes = new Array()
for (o in myMarkers) {
  myPostCodes[myPostCodes.length]=o;
}
var cnt = 0;

function addMyMarkers() {
  if (cnt>=myPostCodes.length) return;// we are done
  document.getElementById('msg').innerHTML+='processing postcode '+cnt+':'+myPostCodes[cnt]+'<br>'
  usePointFromPostcode(myPostCodes[cnt++], placeMarkerAtPoint);
}
            

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function addUnLoadEvent(func) {
      var oldonunload = window.onunload;
      if (typeof window.onunload != 'function') {
        window.onunload = func;
      } else {
        window.onunload = function() {
          oldonunload();
          func();
        }
      }
}

addLoadEvent(mapLoad);
addUnLoadEvent(GUnload);
</script>
<style>
#map {
      height: 500px;
      width: 500px;
}
</style>
</head>
<body>
<div id="map"> </div>
<div id="msg"></div>
</body>
</html>
0
All Courses

From novice to tech pro — start learning today.