Solved

Google Maps - Add Clickable Pointers

Posted on 2013-01-16
17
434 Views
Last Modified: 2013-11-10
Hello,

I have an ASP page running the Google Maps API which centers around a country that is called by it's name:

http://villasdirect.com/_admin/dev/Country_Map.asp

However, I also wish to add locations as pins which could then be clicked to go to the next step.  In other words, users select the United Kingdom (as is shown on the live page) and they will then see pins of locations in our DB.  We have the lng/lat data, plus name, so it would be great if the user saw the name of the location when hovering the mouse over the pin and goes to a URL when they click it...

The markers I wish to add look like this, but I can't get it to work...!

<markers><marker Town="Fayence" Region="Provence - Var" type="green" lng="6.694103" lat="43.624076"/><marker Town="La Cadiere  d\'Azur" Region="Provence - Var" type="green" lng="5.755173" lat="43.196218"/><marker Town="Villefranche Du Périgord" Region="South West France" type="green" lng="1.080006" lat="44.62966"/><marker Town="Limetz-Villez" Region="Paris" type="green" lng="1.547366" lat="49.029137"/><marker Town="Boulogne-Billancourt" Region="Paris" type="green" lng="2.237803" lat="48.84325"/><marker Town="Saint-Germain-En-Laye" Region="Paris" type="green" lng="2.0934031" lat="48.8955155"/><marker Town="Barbizon" Region="Paris" type="green" lng="2.6024599" lat="48.4719053"/><marker Town="Althen Des Paluds" Region="Provence - Var" type="green" lng="4.958824" lat="44.004336"/></markers>

Help! (Thanks!)
0
Comment
Question by:Nico2011
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
17 Comments
 
LVL 42

Expert Comment

by:sedgwick
ID: 38782548
so first you need to parse the xml and add the markers?
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 38782553
basically to add marker you code the following:

 map = new google.maps.Map(document.getElementById("your_map_canvas"));

  marker = new google.maps.Marker({
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(59.32522, 18.07002)
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);

Open in new window

0
 

Author Comment

by:Nico2011
ID: 38783006
Thanks - I'm sure this is on the right track - I've tried to add the XML parsing code, but I'm getting an error.  Please could you take a look at lines 36 to 45 where I added that code - I'm terrible at javascript and xml...!

Here's my code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyDxVVqM06Tyh5J_lnz8JWDWDHVjH9KPq38" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()" onload="showAddress(); return false">

    <div id="map" style="width: 800px; height: 600px"></div>
  
    <form onsubmit="showAddress(); return false" action="#">
      <input id="search" size="60" type="hidden" value="Cyprus" />
    </form>
        
    <div id="message"></div>

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>

    <script type="text/javascript">
    //<![CDATA[
	var xmlsource = '<markers><marker Town="Fayence" Region="Provence - Var" type="green" lng="6.694103" lat="43.624076"/><marker Town="La Cadiere  d\'Azur" Region="Provence - Var" type="green" lng="5.755173" lat="43.196218"/><marker Town="Villefranche Du Périgord" Region="South West France" type="green" lng="1.080006" lat="44.62966"/><marker Town="Limetz-Villez" Region="Paris" type="green" lng="1.547366" lat="49.029137"/><marker Town="Boulogne-Billancourt" Region="Paris" type="green" lng="2.237803" lat="48.84325"/><marker Town="Saint-Germain-En-Laye" Region="Paris" type="green" lng="2.0934031" lat="48.8955155"/></markers>'
    
    if (GBrowserIsCompatible()) { 

      var map = new GMap(document.getElementById("map"));
   	  map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(20,0),2);

	  var infoWindow = new google.maps.InfoWindow;
	  $( $.parseXML( xmlsource ) ).find("marker").each(function() {
	  marker = new google.maps.Marker({
      map:map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      position: new google.maps.LatLng(59.32522, 18.07002)
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);
	  }
      
      
      // ====== Create a Client Geocoder ======
      var geo = new GClientGeocoder(); 

      // ====== Array for decoding the failure codes ======
      var reasons=[];
      reasons[G_GEO_SUCCESS]            = "Success";
      reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
      reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
      
      // ====== Geocoding ======
      function showAddress() {
        var search = document.getElementById("search").value;
        // ====== Perform the Geocoding ======        
        geo.getLocations(search, function (result)
          { 
            // If that was successful
            if (result.Status.code == G_GEO_SUCCESS) {
              // How many resuts were found
              document.getElementById("message").innerHTML = "Found " +result.Placemark.length +" results";
              // Loop through the results, placing markers
              for (var i=0; i<result.Placemark.length; i++) {
                var p = result.Placemark[i].Point.coordinates;
                var marker = new GMarker(new GLatLng(p[1],p[0]));
                document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ result.Placemark[i].address + marker.getPoint();
                map.addOverlay(marker);
              }
              // centre the map on the first result
              var p = result.Placemark[0].Point.coordinates;
              // ===== Look for the bounding box of the first result =====
              var N = result.Placemark[0].ExtendedData.LatLonBox.north;
              var S = result.Placemark[0].ExtendedData.LatLonBox.south;
              var E = result.Placemark[0].ExtendedData.LatLonBox.east;
              var W = result.Placemark[0].ExtendedData.LatLonBox.west;
              var bounds = new GLatLngBounds(new GLatLng(S,W), new GLatLng(N,E));
              // Choose a zoom level that fits
              var zoom = map.getBoundsZoomLevel(bounds);

              map.setCenter(bounds.getCenter(),zoom);

              var points=[new GLatLng(N,W),new GLatLng(N,E),new GLatLng(S,E),new GLatLng(S,W),new GLatLng(N,W)];
              map.addOverlay(new GPolyline(points));

            }
            // ====== Decode the error status ======
            else {
              var reason="Code "+result.Status.code;
              if (reasons[result.Status.code]) {
                reason = reasons[result.Status.code]
              } 
              alert('Could not find "'+search+ '" ' + reason);
            }
          }
        );
      }
    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    </script>
  </body>

</html>

Open in new window

0
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 
LVL 42

Expert Comment

by:sedgwick
ID: 38783057
change line 37 to:
$( $.parseXML( xmlsource ) ).find("marker").each(function() {
	  var lng = $(this).attr('lng');
	  var lat = $(this).attr('lat');

Open in new window


now you have your lat and lng ro create the marker.
0
 

Author Comment

by:Nico2011
ID: 38783099
Sorry - I still get a syntax error...!  I amended the code as below - have I done someting wrong somewhere...?

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyDxVVqM06Tyh5J_lnz8JWDWDHVjH9KPq38" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()" onload="showAddress(); return false">

    <div id="map" style="width: 800px; height: 600px"></div>
  
    <form onsubmit="showAddress(); return false" action="#">
      <input id="search" size="60" type="hidden" value="Cyprus" />
    </form>
        
    <div id="message"></div>

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>

    <script type="text/javascript">
    //<![CDATA[
	var xmlsource = '<markers><marker Town="Fayence" Region="Provence - Var" type="green" lng="6.694103" lat="43.624076"/><marker Town="La Cadiere  d\'Azur" Region="Provence - Var" type="green" lng="5.755173" lat="43.196218"/><marker Town="Villefranche Du Périgord" Region="South West France" type="green" lng="1.080006" lat="44.62966"/><marker Town="Limetz-Villez" Region="Paris" type="green" lng="1.547366" lat="49.029137"/><marker Town="Boulogne-Billancourt" Region="Paris" type="green" lng="2.237803" lat="48.84325"/><marker Town="Saint-Germain-En-Laye" Region="Paris" type="green" lng="2.0934031" lat="48.8955155"/></markers>'
    
    if (GBrowserIsCompatible()) { 

      var map = new GMap(document.getElementById("map"));
   	  map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(20,0),2);

	  var infoWindow = new google.maps.InfoWindow;
	  $( $.parseXML( xmlsource ) ).find("marker").each(function() {
	  var lng = $(this).attr('lng');
	  var lat = $(this).attr('lat');
	  marker = new google.maps.Marker({
      map:map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      position: new google.maps.LatLng(59.32522, 18.07002)
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);
	  }
      
      
      // ====== Create a Client Geocoder ======
      var geo = new GClientGeocoder(); 

      // ====== Array for decoding the failure codes ======
      var reasons=[];
      reasons[G_GEO_SUCCESS]            = "Success";
      reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
      reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
      
      // ====== Geocoding ======
      function showAddress() {
        var search = document.getElementById("search").value;
        // ====== Perform the Geocoding ======        
        geo.getLocations(search, function (result)
          { 
            // If that was successful
            if (result.Status.code == G_GEO_SUCCESS) {
              // How many resuts were found
              document.getElementById("message").innerHTML = "Found " +result.Placemark.length +" results";
              // Loop through the results, placing markers
              for (var i=0; i<result.Placemark.length; i++) {
                var p = result.Placemark[i].Point.coordinates;
                var marker = new GMarker(new GLatLng(p[1],p[0]));
                document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ result.Placemark[i].address + marker.getPoint();
                map.addOverlay(marker);
              }
              // centre the map on the first result
              var p = result.Placemark[0].Point.coordinates;
              // ===== Look for the bounding box of the first result =====
              var N = result.Placemark[0].ExtendedData.LatLonBox.north;
              var S = result.Placemark[0].ExtendedData.LatLonBox.south;
              var E = result.Placemark[0].ExtendedData.LatLonBox.east;
              var W = result.Placemark[0].ExtendedData.LatLonBox.west;
              var bounds = new GLatLngBounds(new GLatLng(S,W), new GLatLng(N,E));
              // Choose a zoom level that fits
              var zoom = map.getBoundsZoomLevel(bounds);

              map.setCenter(bounds.getCenter(),zoom);

              var points=[new GLatLng(N,W),new GLatLng(N,E),new GLatLng(S,E),new GLatLng(S,W),new GLatLng(N,W)];
              map.addOverlay(new GPolyline(points));

            }
            // ====== Decode the error status ======
            else {
              var reason="Code "+result.Status.code;
              if (reasons[result.Status.code]) {
                reason = reasons[result.Status.code]
              } 
              alert('Could not find "'+search+ '" ' + reason);
            }
          }
        );
      }
    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    </script>
  </body>

</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
ID: 38783149
Line 44: remove the figures and use the lat and lng variables from lines 38 & 39.
Line 47: remove bracket and use this instead:
});
0
 

Author Comment

by:Nico2011
ID: 38786113
Thanks Sedgwick, but whilst there are no errors, it doesn't play ball...  I get a non-centered map with no pins...! That can be seen here: http://www.villasdirect.com/_admin/dev/country_map.asp

Here's the updated code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyDxVVqM06Tyh5J_lnz8JWDWDHVjH9KPq38" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()" onload="showAddress(); return false">

    <div id="map" style="width: 800px; height: 600px"></div>
  
    <form onsubmit="showAddress(); return false" action="#">
      <input id="search" size="60" type="hidden" value="France" />
    </form>
        
    <div id="message"></div>

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>

    <script type="text/javascript">
    //<![CDATA[
	var xmlsource = '<markers><marker Town="Fayence" Region="Provence - Var" type="green" lng="6.694103" lat="43.624076"/><marker Town="La Cadiere  d\'Azur" Region="Provence - Var" type="green" lng="5.755173" lat="43.196218"/><marker Town="Villefranche Du Périgord" Region="South West France" type="green" lng="1.080006" lat="44.62966"/><marker Town="Limetz-Villez" Region="Paris" type="green" lng="1.547366" lat="49.029137"/><marker Town="Boulogne-Billancourt" Region="Paris" type="green" lng="2.237803" lat="48.84325"/><marker Town="Saint-Germain-En-Laye" Region="Paris" type="green" lng="2.0934031" lat="48.8955155"/></markers>'
    
    if (GBrowserIsCompatible()) { 

      var map = new GMap(document.getElementById("map"));
   	  map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(20,0),2);

	  var infoWindow = new google.maps.InfoWindow;
	  $( $.parseXML( xmlsource ) ).find("marker").each(function() {
	  var lng = $(this).attr('lng');
	  var lat = $(this).attr('lat');
	  marker = new google.maps.Marker({
      map:map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      position: new google.maps.LatLng(lat, lng)
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);
	  });
      
      
      // ====== Create a Client Geocoder ======
      var geo = new GClientGeocoder(); 

      // ====== Array for decoding the failure codes ======
      var reasons=[];
      reasons[G_GEO_SUCCESS]            = "Success";
      reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
      reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
      
      // ====== Geocoding ======
      function showAddress() {
        var search = document.getElementById("search").value;
        // ====== Perform the Geocoding ======        
        geo.getLocations(search, function (result)
          { 
            // If that was successful
            if (result.Status.code == G_GEO_SUCCESS) {
              // How many resuts were found
              document.getElementById("message").innerHTML = "Found " +result.Placemark.length +" results";
              // Loop through the results, placing markers
              for (var i=0; i<result.Placemark.length; i++) {
                var p = result.Placemark[i].Point.coordinates;
                var marker = new GMarker(new GLatLng(p[1],p[0]));
                document.getElementById("message").innerHTML += "<br>"+(i+1)+": "+ result.Placemark[i].address + marker.getPoint();
                map.addOverlay(marker);
              }
              // centre the map on the first result
              var p = result.Placemark[0].Point.coordinates;
              // ===== Look for the bounding box of the first result =====
              var N = result.Placemark[0].ExtendedData.LatLonBox.north;
              var S = result.Placemark[0].ExtendedData.LatLonBox.south;
              var E = result.Placemark[0].ExtendedData.LatLonBox.east;
              var W = result.Placemark[0].ExtendedData.LatLonBox.west;
              var bounds = new GLatLngBounds(new GLatLng(S,W), new GLatLng(N,E));
              // Choose a zoom level that fits
              var zoom = map.getBoundsZoomLevel(bounds);

              map.setCenter(bounds.getCenter(),zoom);

              var points=[new GLatLng(N,W),new GLatLng(N,E),new GLatLng(S,E),new GLatLng(S,W),new GLatLng(N,W)];
              map.addOverlay(new GPolyline(points));

            }
            // ====== Decode the error status ======
            else {
              var reason="Code "+result.Status.code;
              if (reasons[result.Status.code]) {
                reason = reasons[result.Status.code]
              } 
              alert('Could not find "'+search+ '" ' + reason);
            }
          }
        );
      }
    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    </script>
  </body>

</html>

Open in new window


Please let me know!  Thanks very much for your help!!
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38796255
Version 2 of the Google Maps API is deprecated and no longer supported. Use version 3.
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
  </head>
  <body>

    <div id="map" style="width: 800px; height: 600px"></div>
  
    <form onsubmit="showAddress(); return false" action="#">
      <input id="search" size="60" type="hidden" value="France" />
    </form>
        
    <div id="message"></div>

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>

    <script type="text/javascript">
    //<![CDATA[
       
    
	var xmlsource = '<markers><marker Town="Fayence" Region="Provence - Var" type="green" lng="6.694103" lat="43.624076"/><marker Town="La Cadiere  d\'Azur" Region="Provence - Var" type="green" lng="5.755173" lat="43.196218"/><marker Town="Villefranche Du Périgord" Region="South West France" type="green" lng="1.080006" lat="44.62966"/><marker Town="Limetz-Villez" Region="Paris" type="green" lng="1.547366" lat="49.029137"/><marker Town="Boulogne-Billancourt" Region="Paris" type="green" lng="2.237803" lat="48.84325"/><marker Town="Saint-Germain-En-Laye" Region="Paris" type="green" lng="2.0934031" lat="48.8955155"/></markers>'
    
	var myOptions = {
		zoom: 4,
	  	mapTypeId: google.maps.MapTypeId.ROADMAP
	  };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);

	  var infoWindow = new google.maps.InfoWindow;
	  $( $.parseXML( xmlsource ) ).find("marker").each(function() {
	  	var lng = $(this).attr('lng');
	  	var lat = $(this).attr('lat');
	  	marker = new google.maps.Marker({
      		map:map,
      		draggable:true,
      		animation: google.maps.Animation.DROP,
      		position: new google.maps.LatLng(59.32522, 18.07002)
      	});
	  });
      google.maps.event.addListener(marker, 'click');
	
      // ====== Create a Client Geocoder ======
      var geo = new google.maps.Geocoder(); 
	  geo.geocode({'address': document.getElementById("search").value}, function (results, status) {
         var ne = results[0].geometry.viewport.getNorthEast();
         var sw = results[0].geometry.viewport.getSouthWest();

         map.fitBounds(results[0].geometry.viewport); 
		 placeMarkers();              
      }); 
	  
	  function placeMarkers(){
	  	var xmlList = $.parseXML(xmlsource);
		var markers = $(xmlList).find('marker');
		for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat($(markers[i]).attr("lat")),
                                    parseFloat($(markers[i]).attr("lng")));
		var type = $(markers[i]).attr("type");
		var imgnam = "";
		if(type == "green")	{
			imgnam = "http://openmbta.org/images/map/PinDown1Green.png?1306943843";
		}else{
			imgnam = "http://openmbta.org/images/map/PinDown1.png?1306943843";
		}		
		var img = new google.maps.MarkerImage(
			imgnam,
			new google.maps.Size(30,35),
			new google.maps.Point(0,0),
			new google.maps.Point(15,35)
		);
		//add a link to your xml that can be inserted here where I have http://www.google.com
		var html = "<a href='http://www.google.com'>" + $(markers[i]).attr('Region') + ', ' + $(markers[i]).attr('Town') + "</a>";									
        var marker = new google.maps.Marker({position: latlng, map: map, icon: img, html:html});
		
		var infowindow1 = new google.maps.InfoWindow();
		google.maps.event.addListener(marker, 'mouseover', function() {
			infowindow1.setContent(this.html);
	        infowindow1.open(map, this);
	    });
		}
		  
	  }

    </script>
  </body>

</html>

Open in new window

0
 

Author Closing Comment

by:Nico2011
ID: 38800292
Thanks very much - perfect!
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 38800351
no splitting points?
0
 

Author Comment

by:Nico2011
ID: 38800382
Sorry Sedgwick - there's an open question for the similar subject: "Google Maps Page not working" ask this question there and I'll award those to you - to be fair!
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 38800928
i've added comment to the other question link:
Google Maps Page not working

10x alot.

-sedgwick
0
 

Author Comment

by:Nico2011
ID: 38800942
Sorry Sedgwick - I have tried to amend this, but to no avail.  Tommyboy suggested I click 'Request Attention', but I cannot see that now the question has been marked as solved.

I didn't see the other comment on the other question!!!

Ok - let me start again - I am going to post ANOTHER question now - the same title as this one and will wait for you to add a comment...
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 38801062
post a request for splitting points here:
Community_Support - General

attach the original question url.

10x

-sedgwick
0
 

Author Comment

by:Nico2011
ID: 38801233
Hi Sedgwick,

I have sent an email to customer care to ask if they can split this for me.

Hope they can help.

Best wishes/Nico
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

623 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