Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Google Maps - Add Clickable Pointers

Posted on 2013-01-16
17
Medium Priority
?
435 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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 
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 2000 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

NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

688 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