Solved

Google Maps - Add Clickable Pointers

Posted on 2013-01-16
17
421 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
  • 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
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)

762 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

19 Experts available now in Live!

Get 1:1 Help Now