Results 1 to 3 of 3
  1. #1
    Join Date
    Mar 2011
    Posts
    10

    Unanswered: Bing Maps / Google Maps

    Does anyone have any experience in using Bing Maps or Google Maps? I am trying to display locations on a map that are pulled from my SQL DB. I am having a heck of a time understanding how to properly map these as "markers" on the maps. Either of the two companies map services will work for me.

    If anyone has any code they can share, that they have used in the past, I would be very grateful!

  2. #2
    Join Date
    Feb 2004
    Location
    New Zealand
    Posts
    1,423
    Provided Answers: 8
    I used Google Maps what I end up doing was getting ASP to write a XML file and google could read that value in

    Code:
    <script type="text/javascript">
    /*
    *********************************************
    * Written By StePhan McKillen
    * copyright 2010
    * I would like to thanks are the guys at google
    * for letting the world have some free stuff. 
    * make the internet a beater place.
    * and Esa's http://mapsapi.googlepages.com/categories.htm
    * For point me down the right track
    * also would like to thank
    * the other user who help build this site in a round about way.
    */
    
    var param_useSidebar = false; 
    var mapHTMLS = [];
    var Alatlng = [];
    var mapMarkers =[];
    var map;
    var infowindowLevel = 0;
    var marker;
    var markers ;
    var cm_openInfowindow;
    
    function initialize(){
        var myLatlng = new google.maps.LatLng(-41.25, 172.50);
        var myOptions = 
        	{
          	zoom: 6,
          	center: myLatlng,
          	navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
          	mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
          	mapTypeId: google.maps.MapTypeId.TERRAIN
          	}
        	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        	downloadUrl("xml/POINTS.XML", function(data) 
        	{
          	markers = data.documentElement.getElementsByTagName("marker");
          	for (var i = 0; i < markers.length; i++)
          	 {
    			var Nlat = parseFloat(markers[i].getAttribute("lat"));
    			var Nlng = parseFloat(markers[i].getAttribute("lng"));
    			Alatlng[i] = Nlat + ',' + Nlng;
    			var MyIcon = 'images/' + markers[i].getAttribute("icon");
    			//alert(MyIcon);
    			var image = new google.maps.MarkerImage(MyIcon + '.png',
    			// This marker is 20 pixels wide by 32 pixels tall.
    			new google.maps.Size(20, 35),
    			// The origin for this image is 0,0.
    			new google.maps.Point(0,0),
    			// The anchor for this image is the base of the flagpole at 0,32.
    			new google.maps.Point(10, 32));
    			var shadow = new google.maps.MarkerImage('images/shadow.png',
    			// The shadow image is larger in the horizontal dimension
    			// while the position and offset are the same as for the main image.
    			new google.maps.Size(35, 32),
    			new google.maps.Point(0,0),
    			new google.maps.Point(5, 32));
    			// Shapes define the clickable region of the icon.
    			// The type defines an HTML &lt;area&gt; element 'poly' which
    			// traces out a polygon as a series of X,Y points. The final
    			// coordinate closes the poly by connecting to the first
    			// coordinate.
    			var shape = {coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly'};
    			var latlng = new google.maps.LatLng(Nlat,Nlng);
    			marker = new google.maps.Marker({
    				position: latlng, 
    				map: map,
    				icon: image,
    				shadow: shadow,
    				title: markers[i].getAttribute("Label") // + " : " +  markers[i].getAttribute("icon")
    				});
    				attachInfowindow(marker,1,i);
    			if(param_useSidebar == true)
    				{
    				var Imgit = document.createElement("img");
    				Imgit.setAttribute("src",MyIcon+'.png');
    				Imgit.setAttribute("border",0);
    				Imgit.setAttribute("height",15);
    				Imgit.setAttribute("width",10);
    				var markerA = document.createElement("a");
    				markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
    				markerA.setAttribute("title","click to see Info Window");
    				markerA.style.color = "#000000";
    				var sidebarText= "";
    				sidebarText += markers[i].getAttribute("Label") ;
    				markerA.appendChild(document.createTextNode(sidebarText));
    				sidebarDIV.appendChild(Imgit);
    				sidebarDIV.appendChild(markerA);
    				sidebarDIV.appendChild(document.createElement("br"));
    				} 
    
    				// end sidebar      
    				}
    				});
    				 }
    			//end it
    
    
    function attachInfowindow(marker, number,i) {
    // Yes I did it the old fashin way as that the only way I know how to
    // Try the the 
       var tableData = "<div id='content' style='width:330px;height:200px;'><table border=0 width='100%' height='100%'><tr><td class='iw-header' colspan='2'>[WHO]</td></tr><tr><td valign='top' >[PHOTO]</td><td valign='top'>[INFO]</td></tr><tr><td colspan='2' align='center' valign='bottom' >[DD]</td></tr></table></div>";
       var Photo = markers[i].getAttribute("photo");
       var whois = markers[i].getAttribute("Label");
       tableData = tableData.replace('[WHO]',whois);
       
       if (Photo||'')
       {
       
       tableData = tableData.replace('[PHOTO]',"<img class='corner ishadow20' border=1 src='images/photos/" + Photo +"' >" );
    	}
    	else
    	{
    	tableData = tableData.replace('[PHOTO]',"");
    	}
       directions = "<center><a href='http://maps.google.com/maps?saddr=&daddr=[lat],[lng]' Target='_Blank' >Get Directions</a><br>[ID]</center>";
       
       var CC = markers[i].getAttribute("Pointit");
       
       if (CC||'')
       {
       var ID = "<font size='1'><A href='getit.asp?ID=[ID]&edit=1'>Edit Point</a></font>";
       }
       else
       {
       var ID = "";
       }
    
       var MyID = parseFloat(markers[i].getAttribute("ID"));
       ID = ID.replace('[ID]',MyID);
       directions = directions.replace('[ID]',ID);
       directions = directions.replace('[lat]',parseFloat(markers[i].getAttribute("lat")));
       directions = directions.replace('[lng]',parseFloat(markers[i].getAttribute("lng")));
       var CheckLenght = markers[i].getAttribute("Mess").length
       // alert(CheckLenght);
       //if CheckLenght>0 {
       var textArray = markers[i].getAttribute("Mess").replace(',',"<br />");
       // yes I know this is the lasvy way but I'm still leaning Javascript.
       textArray = textArray.replace(',',"<br />");
       textArray = textArray.replace(',',"<br />");
       textArray = textArray.replace(',',"<br />");
       textArray = textArray.replace(',',"<br />");
       textArray = textArray.replace(',',"<br />");
       textArray = textArray.replace(',',"<br />");
       textArray = textArray.replace(',',"<br />");
       textArray = textArray.replace(',',"<br />");
       textArray = textArray.replace(',',"<br />");
       // }
       // else
       // {
       // var textArray ="You can Put you own memorial here";
       // }
    	tableData = tableData.replace('[INFO]','<p><font size=-1>' + textArray + '</font></p>');	
    	tableData = tableData.replace('[DD]',directions);
    
          	mapHTMLS[i]= tableData;
          	mapMarkers[i] = marker;
        var infowindow = new google.maps.InfoWindow({content: mapHTMLS[i] });
        	google.maps.event.addListener(marker, 'click', function() {infowindow.setZIndex(++infowindowLevel);cm_markerClicked(i);});
    }
    
    
    
    function cm_markerClicked(markerNum)
    	{
    	var tt = Alatlng[markerNum].split(",");
    	var NewCenter = new google.maps.LatLng(parseFloat(tt[0]),parseFloat(tt[1]));
    	map.panTo(NewCenter); 
    	var infowindowOptions = {content: mapHTMLS[markerNum]}
    	var infowindow = new google.maps.InfoWindow(infowindowOptions);
    	infowindow.open(map, mapMarkers[markerNum]);
    	cm_setInfowindow(infowindow);   
    	}
    	
    function cm_setInfowindow(newInfowindow)
    	{
      	if (cm_openInfowindow != undefined) {cm_openInfowindow.close();}
      	cm_openInfowindow = newInfowindow;
    	}
    
    function createElem(opt_className, opt_html, opt_tagName) {
    	var tag = opt_tagName||"div";
    	var elem = document.createElement(tag);
      		if (opt_html) elem.innerHTML = opt_html;
      		if (opt_className) elem.className = opt_className;
      return elem;
    }
    </script>
    now the XML file

    Code:
      <?xml version="1.0" encoding="UTF-8" ?> 
    - <markers>
      <marker lat="-39.0337199577664" lng="174.153184890747" ID="100" icon="2004" Pointit="OK" photo="" Label="" Mess="bell block black spot" /> 
      <marker lat="-39.0301196227599" lng="174.165351390838" ID="46" icon="2009" Pointit="OK" photo="" Label="" Mess="overturned car mangatoki stream" /> 
      </markers>

    ooo year don't forget the java stuff
    Last edited by myle; 06-22-11 at 09:11. Reason: spelling
    hope this help

    See clear as mud


    StePhan McKillen
    the aim is store once, not store multiple times
    Remember... Optimize 'til you die!
    Progaming environment:
    Access based on my own environment: DAO3.6/A97/A2000/A2003/A2007/A2010
    VB based on my own environment: vb6 sp5
    ASP based on my own environment: 5.6
    VB-NET based on my own environment started 2007
    SQL-2005 based on my own environment started 2008
    MYLE
    YOUR PASSWORD IS JUST LIKE YOUR TOOTHBRUSH DON'T SHARE IT.

  3. #3
    Join Date
    Feb 2004
    Location
    New Zealand
    Posts
    1,423
    Provided Answers: 8
    part 2


    Code:
    /**
    * Returns an XMLHttp instance to use for asynchronous
    * downloading. This method will never throw an exception, but will
    * return NULL if the browser does not support XmlHttp for any reason.
    * @return {XMLHttpRequest|Null}
    */
    function createXmlHttpRequest() {
     try {
       if (typeof ActiveXObject != 'undefined') {
         return new ActiveXObject('Microsoft.XMLHTTP');
       } else if (window["XMLHttpRequest"]) {
         return new XMLHttpRequest();
       }
     } catch (e) {
       changeStatus(e);
     }
     return null;
    };
    
    /**
    * This functions wraps XMLHttpRequest open/send function.
    * It lets you specify a URL and will call the callback if
    * it gets a status code of 200.
    * @param {String} url The URL to retrieve
    * @param {Function} callback The function to call once retrieved.
    */
    function downloadUrl(url, callback) {
     var status = -1;
     var request = createXmlHttpRequest();
     if (!request) {
       return false;
     }
    
     request.onreadystatechange = function() {
       if (request.readyState == 4) {
         try {
           status = request.status;
         } catch (e) {
           // Usually indicates request timed out in FF.
         }
         if (status == 200) {
           callback(request.responseXML, request.status);
           request.onreadystatechange = function() {};
         }
       }
     }
     request.open('GET', url, true);
     try {
       request.send(null);
     } catch (e) {
       changeStatus(e);
     }
    };
    
    /**
     * Parses the given XML string and returns the parsed document in a
     * DOM data structure. This function will return an empty DOM node if
     * XML parsing is not supported in this browser.
     * @param {string} str XML string.
     * @return {Element|Document} DOM.
     */
    function xmlParse(str) {
      if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      }
    
      if (typeof DOMParser != 'undefined') {
        return (new DOMParser()).parseFromString(str, 'text/xml');
      }
    
      return createElement('div', null);
    }
    
    /**
     * Appends a JavaScript file to the page.
     * @param {string} url
     */
    function downloadScript(url) {
      var script = document.createElement('script');
      script.src = url;
      document.body.appendChild(script);
    }
    I put the above Java into a util.js

    <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="Java/util.js"></script>
    </head>


    <body onload="initialize()" >
    <!-- Create the the DIV -->
    <div id=""map_canvas"" style=""width:600px; height:800px""></div>

    Its been a while I done this so I have just copy paste the code.
    hope this help

    See clear as mud


    StePhan McKillen
    the aim is store once, not store multiple times
    Remember... Optimize 'til you die!
    Progaming environment:
    Access based on my own environment: DAO3.6/A97/A2000/A2003/A2007/A2010
    VB based on my own environment: vb6 sp5
    ASP based on my own environment: 5.6
    VB-NET based on my own environment started 2007
    SQL-2005 based on my own environment started 2008
    MYLE
    YOUR PASSWORD IS JUST LIKE YOUR TOOTHBRUSH DON'T SHARE IT.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •