Search Results

Search found 547 results on 22 pages for 'marker'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 4/22 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Building a Store Locator ASP.NET Application Using Google Maps API (Part 3)

    Over the past two weeks I've showed how to build a store locator application using ASP.NET and the free Google Maps API and Google's geocoding service. Part 1 looked at creating the database to record the store locations. This database contains a table named Stores with columns capturing each store's address and latitude and longitude coordinates. Part 1 also showed how to use Google's geocoding service to translate a user-entered address into latitude and longitude coordinates, which could then be used to retrieve and display those stores within (roughly) a 15 mile area. At the end of Part 1, the results page listed the nearby stores in a grid. In Part 2 we used the Google Maps API to add an interactive map to the search results page, with each nearby store displayed on the map as a marker. The map added in Part 2 certainly improves the search results page, but the way the nearby stores are displayed on the map leaves a bit to be desired. For starters, each nearby store is displayed on the map using the same marker icon, namely a red pushpin. This makes it difficult to match up the nearby stores listed in the grid with those displayed on the map. Hovering the mouse over a marker on the map displays the store number in a tooltip, but ideally a user could click a marker to see more detailed information about the store, such as its address, phone number, a photo of the storefront, and so forth. This third and final installment shows how to enhance the map created in Part 2. Specifically, we'll see how to customize the marker icons displayed in the map to make it easier to identify which marker corresponds to which nearby store location. We'll also look at adding rich popup windows to each marker, which includes detailed store information and can be updated further to include pictures and other HTML content. Read on to learn more! Read More >

    Read the article

  • Building a Store Locator ASP.NET Application Using Google Maps API (Part 3)

    Over the past two weeks I've showed how to build a store locator application using ASP.NET and the free Google Maps API and Google's geocoding service. Part 1 looked at creating the database to record the store locations. This database contains a table named Stores with columns capturing each store's address and latitude and longitude coordinates. Part 1 also showed how to use Google's geocoding service to translate a user-entered address into latitude and longitude coordinates, which could then be used to retrieve and display those stores within (roughly) a 15 mile area. At the end of Part 1, the results page listed the nearby stores in a grid. In Part 2 we used the Google Maps API to add an interactive map to the search results page, with each nearby store displayed on the map as a marker. The map added in Part 2 certainly improves the search results page, but the way the nearby stores are displayed on the map leaves a bit to be desired. For starters, each nearby store is displayed on the map using the same marker icon, namely a red pushpin. This makes it difficult to match up the nearby stores listed in the grid with those displayed on the map. Hovering the mouse over a marker on the map displays the store number in a tooltip, but ideally a user could click a marker to see more detailed information about the store, such as its address, phone number, a photo of the storefront, and so forth. This third and final installment shows how to enhance the map created in Part 2. Specifically, we'll see how to customize the marker icons displayed in the map to make it easier to identify which marker corresponds to which nearby store location. We'll also look at adding rich popup windows to each marker, which includes detailed store information and can be updated further to include pictures and other HTML content. Read on to learn more! Read More >Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

  • Which would be a better way to load data via ajax

    - by Mike
    I am using google maps and returning html/lat/long from my MySQL database Currently A user picks a business category e.g; "Video Production". an ajax call is sent to a CodeIgniter controller the Controller then queries the db, and returns the following data via JSON Lat/Long of the marker HTML for the popup window this is approximately 34 rows in the database across two tables per business the ajax call receives this data and then plots the marker along with the html onto the map The data that is returned from the controller is one big json object... This is done for all businesses that exist in the Video Production category (currently approx 40 businesses). As you can see, pulling this data for multiple categories (100s of businesses) can get very very taxing on the server. My question is Would it be more beneficial to modify the process flow as such: a user picks a business category e.g; "Video Production". an ajax call is sent to a CodeIgniter controller the controller then queries the database for the location base information lat/long level (used to change marker icon color) This would be a single row per business with several columns the ajax call receives this data and then plots the marker on the map when the user clicks a marker an ajax call is sent to a CodeIgniter Controller the controller queries the database for the HTML and additional data based on business_id and if not, what are some better suggestions to this problem? In summary this means rather than including the HTML and additional data along for each business, only submitting minimal location information and then re-query for that information when each business marker is clicked. Potential Downsides longer load times when a user clicks a marker icon more code?? more queries to the database

    Read the article

  • how to drag a 'div' element to the google maps ,that be changed to a 'marker'..use jquery

    - by zjm1126
    this is my code : <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> </style> <div id="map_canvas" style="width: 500px; height: 300px;float:left;"></div> <div id=b style="width: 50px; height: 50px;background:red;float:left;margin-left:300px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> //********** function initialize() { if (GBrowserIsCompatible()) { // function createMarker(point, number) { var marker = new GMarker(point); var message = ["?","?","?","??","??"]; marker.value = number; GEvent.addListener(marker, "click", function() { var myHtml = "<b>#" + number + "</b><br/>" + message[number -1]; map.openInfoWindowHtml(point, myHtml); }); return marker; } // var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(39.9493, 116.3975), 13); // Add 5 markers to the map at random locations var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngSpan = northEast.lng() - southWest.lng(); var latSpan = northEast.lat() - southWest.lat(); for (var i = 0; i < 5; i++) { var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); map.addOverlay(createMarker(point, i + 1)); } } } //************* $("#b").draggable(); </script> </body> </html>

    Read the article

  • How can I change the color of a Google Maps marker?

    - by abeger
    I'm using the Google Maps API to build a map full of markers, but I want one marker to stand out from the others. The simplest thing to do, I think, would be to change the color of the marker to blue, instead of red. Is this a simple thing to do or do I have to create a whole new icon somehow? If I do have to create a new icon, what's the easiest way to do that?

    Read the article

  • Google Maps API v3: Turning user input coordinates to latlng?

    - by Leventhan
    I'm new with Google Maps. I'm trying to turn coordinates a user inputs to move a marker I have on my map to those coordinates. For instance, if the user inputs 50.75, 74.1 the marker will pan to that coordinate. Unfortunately, I couldn't get it to work. Here's my function: function moveMarker() { var Markerloc = document.getElementById("Markerloc").value; var newLatlng = new google.maps.LatLng(Markerloc); marker.setPosition(newLatLng) } Here's my HTML code: <input type="text" id= "Markerloc" value="Paste your coordinates" /> <input type="button" onclick="moveMarker()" value="Update Marker"> EDIT: I thought that'd fix it, but somehow, it still doesn't work. Here's my code: <script type="text/javascript"> var map; var zoomLevel; function initialize(){ var myLatlng = new google.maps.LatLng(40.65, -74); var myOptions = { zoom: 2, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, } var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var zoomLevel = map.getZoom(); var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true }); // Update current position info. updateMarkerPosition(myLatlng); // Add dragging event listeners. google.maps.event.addListener(marker, 'dragstart', function() { updateMarkerAddress('Dragging...'); }); google.maps.event.addListener (map, 'zoom_changed', function() { updateZoomLevel(map.getZoom()); }); google.maps.event.addListener(marker, 'drag', function() { updateMarkerStatus('Dragging...'); updateMarkerPosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'dragend', function() { updateMarkerStatus('Drag ended'); geocodePosition(marker.getPosition()); }); }; var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateZoomLevel(zoomLevel){ document.getElementById('zoomLevel').innerHTML = zoomLevel; } function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(myLatlng) { document.getElementById('info').innerHTML = [ myLatlng.lat(), myLatlng.lng() ].join(', '); } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } function moveMarker() { var lat = parseFloat(document.getElementById('markerLat').value); var lng = parseFloat(document.getElementById('markerLng').value); var newLatLng = new google.maps.LatLng(lat, lng); marker.setPosition(newLatLng) } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas" style="width: 29%; height: 50%; float: left; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div> <b>Zoom level: </b><div id="zoomLevel"> Scroll mousewheel</div> </div> <input type='text' id='markerLat' value='Target Latitude' /> <input type='text' id='markerLng' value='Target Longitude' /> <input type="button" onclick="moveMarker()" value="Move Marker"> </body> </html>

    Read the article

  • How do I ignore the UTF-8 Byte Order Marker in String comparisons?

    - by Skrud
    I'm having a problem comparing strings in a Unit Test in C# 4.0 using Visual Studio 2010. This same test case works properly in Visual Studio 2008 (with C# 3.5). Here's the relevant code snippet: byte[] rawData = GetData(); string data = Encoding.UTF8.GetString(rawData); Assert.AreEqual("Constant", data, false, CultureInfo.InvariantCulture); While debugging this test, the data string appears to the naked eye to contain exactly the same string as the literal. When I called data.ToCharArray(), I noticed that the first byte of the string data is the value 65279 which is the UTF-8 Byte Order Marker. What I don't understand is why Encoding.UTF8.GetString() keeps this byte around. How do I get Encoding.UTF8.GetString() to not put the Byte Order Marker in the resulting string?

    Read the article

  • Android - How to launch Google map intent in android app with certain location, zoom level and marker

    - by umirza47
    Map Intent not working with specific zoom level as well as custom marker float lat = 40.714728f; float lng = -73.998672f; String maplLabel = "ABC Label"; final Intent intent = new Intent(android.content.Intent.ACTION_VIEW, Uri.parse("geo:0,0?q="+lat+","+lng+"&z=16 (" + maplLabel + ")")); startActivity(intent); Anybody know what is wrong? or how to do so? I want to show map of certain (lat,lng) with a custom label-marker at a specific zoom level.

    Read the article

  • How can I speed up Netbeans Task Marker resolution?

    - by Stephen
    I'm trying to quickly navigate and fix problems in code in Netbeans, and it just takes too long. I'll fix a problem, and it will take seconds to re-compile. While this is happening, the marker remains, and all the others that depend on it will too (requiring multiple next-marker key strokes to get to a "new" problem). If I'm doing a fix that changes the number of lines (e.g. organise imports), the markers will navigate to the wrong place, even though the correct text is underlined. Is there a way to speed this up? I presume it's because it's doing a full file compilation via javac to calculate the markers. BUT the information is available in netbeans, because the correct text is underlined, even when the compilation occurs.

    Read the article

  • different markers on google maps v3

    - by user1447313
    i need help again :( How i can add different markers to google map v3. here is example for may marker var latlng = new google.maps.LatLng(lat,lng); var image = "../img/hotel_icon.png"; var locationDescription = this.locationDescription; var marker = new google.maps.Marker({ map: map, position: latlng, title:'pk:'+name, icon: image }); bounds.extend(latlng); setMarkes(map, marker, name, locationDescription); });//close each map.fitBounds(bounds); });//close getjson }//close initialize function setMarkes(map, marker, name, locationDescription){ google.maps.event.addListener(marker, 'mouseover', function() { infowindow.close(); infowindow.setContent('<h3>'+name+'</h3><em>'+locationDescription+'</em>'); infowindow.open(map, marker); }); } is any help

    Read the article

  • Google maps and J-Query: Individual markers?

    - by user351189
    Hi there, I have created a Google maps mashup, where with a bit of input, I have managed to have a sidebar that links to a video icon/marker that then opens up an info window showing virtual tours. I would, however, like to put different coloured marker icons on the map depending on the category that the video is in. This would be easy enough to do, but my page is made up of a mixture of J-Query and JavaScript all calling to the individual flash files. Could someone help me with the code for adding extra marker icons for different categories? Here is the code: So, after the intial 'var camera;' point, there comes this: function addMarker(point, title, video, details) { var marker = new GMarker(point, {title: title, icon:camera}); GEvent.addListener(marker, "click", function() { if (details) { marker.openInfoWindowTabsHtml([new GInfoWindowTab("Video", video), new GInfoWindowTab("More", details)]); } else { marker.openInfoWindowHtml(video); } }); Then further down, is the code for calling the individual marker image. I would like to add another image to this list - would I start out by calling the new object 'camera-red.image' or something similar? function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("mapDiv")); map.setCenter(new GLatLng(51.52484592590448, -0.13345599174499512), 17); map.setUIToDefault(); var uclvtSatMapType = createUclVTSatMapType() map.addMapType(uclvtSatMapType); map.setMapType(uclvtSatMapType); camera = new GIcon(G_DEFAULT_ICON); camera.image = "ucl-video.png"; camera.iconSize = new GSize(32,37); camera.iconAnchor = new GPoint(16,35); camera.infoWindowAnchor = new GPoint(16,2); addMarkersToMap(); } The actual map can be found here: link text Thanks. Gray

    Read the article

  • In Lua, how to pass vararg to another function while also taking a peek at them?

    - by romkyns
    It seems that in Lua, I can either pass vararg on to another function, or take a peek at them through arg, but not both. Here's an example: function a(marker, ...) print(marker) print(#arg, arg[1],arg[2]) end function b(marker, ...) print(marker) destination("--2--", ...) end function c(marker, ...) print(marker) print(#arg, arg[1],arg[2]) destination("--3--", ...) end function destination(marker, ...) print(marker) print(#arg, arg[1],arg[2]) end Observe that a only looks at the varargs, b only passes them on, while c does both. Here are the results: >> a("--1--", "abc", "def") --1-- 2 abc def >> b("--1--", "abc", "def") --1-- --2-- 2 abc def >> c("--1--", "abc", "def") --1-- test.lua:13: attempt to get length of local 'arg' (a nil value) stack traceback: ...test.lua:13: in function 'c' ...test.lua:22: in main chunk [C]: ? What am I doing wrong? Am I not supposed to combine the two? Why not?

    Read the article

  • Show certain InfoWindow in Google Map API V3

    - by pash
    Hello. I wrote the following code to display markers. There are 2 buttons which show Next or Previous Infowindow for markers. But problem is that InfoWindows are not shown using google.maps.event.trigger Can someone help me with this problem. Thank you. Here is code: <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Common Loader</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var infowindow; var map; var bounds; var markers = []; var markerIndex=0; function initialize() { var myLatlng = new google.maps.LatLng(41.051407, 28.991134); var myOptions = { zoom: 5, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); markers = document.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("phone"), markers[i].getAttribute("distance")); } rebound(map); } function createMarker(name, latlng, phone, distance) { var marker = new google.maps.Marker({position: latlng, map: map}); var myHtml = "<table style='width:100%;'><tr><td><b>" + name + "</b></td></tr><tr><td>" + phone + "</td></tr><tr><td align='right'>" + distance + "</td></tr></table>"; google.maps.event.addListener(marker, "click", function() { if (infowindow) infowindow.close(); infowindow = new google.maps.InfoWindow({content: myHtml}); infowindow.open(map, marker); }); return marker; } function rebound(mymap){ bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markers.length; i++) { bounds.extend(new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")))); } mymap.fitBounds(bounds); } function showNextInfo() { if(markerIndex<markers.length-1) markerIndex++; else markerIndex = 0 ; alert(markers[markerIndex].getAttribute('name')); google.maps.event.trigger(markers[markerIndex],"click"); } function showPrevInfo() { if(markerIndex>0) markerIndex--; else markerIndex = markers.length-1 ; google.maps.event.trigger(markers[markerIndex],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:400px; height:300px"></div> <markers> <marker name='Name1' lat='41.051407' lng='28.991134' phone='+902121234561' distance=''/> <marker name='Name2' lat='40.858746' lng='29.121666' phone='+902121234562' distance=''/> <marker name='Name3' lat='41.014604' lng='28.972256' phone='+902121234562' distance=''/> <marker name='Name4' lat='41.012386' lng='26.978350' phone='+902121234562' distance=''/> </markers> <input type="button" onclick="showPrevInfo()" value="prev">&nbsp;<input type="button" onclick="showNextInfo()" value="next"> </body> </html>

    Read the article

  • Jquery, XML and Google Map

    - by EXPennD
    Hi, I'm integrating a Google Map in my website that user could add some thumbnails and details of their own house. Here's a code preview of what I want to happen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Jquery and Google Map // var locations = {}; function load() { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(47.614495, -122.341861), 13); GDownloadUrl("markerdata.xml", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var store = {latlng: latlng, name: name, address: address, type: type}; var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6)); latlngHash = latlngHash.replace(".","").replace(".", "").replace("-",""); if (locations[latlngHash] == null) { locations[latlngHash] = [] } locations[latlngHash].push(store); } for (var latlngHash in locations) { var stores = locations[latlngHash]; if (stores.length > 1) { map.addOverlay(createClusteredMarker(stores)); } else { map.addOverlay(createMarker(stores)); } } }); } function createMarker(stores) { var store = stores[0]; var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"}); var marker = new GMarker(store.latlng, {icon: newIcon}); var html = "<b>" + store.name + "</b> <br/>" + store.address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } function createClusteredMarker(stores) { var newIcon = MapIconMaker.createMarkerIcon({width: 44, height: 44, primaryColor: "#00ff00"}); var marker = new GMarker(stores[0].latlng, {icon: newIcon}); var html = ""; for (var i = 0; i < stores.length; i++) { html += "<b>" + stores[i].name + "</b> <br/>" + stores[i].address + "<br/>"; } GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> description I want this feature to be fully interactive. If possible user can drag and drop a marker to the location on the Google map and the description field would be enabled after adding the marker so user could add details and submit it. Also here's my current situation. The reason why I want it to be done in XML is the Content Management System that I currently use for this project don't allow me to add Database and Php scripts. The only thing that I have access is I could add new HTML on the BODY section and also External Javascript on the HEAD section. Sorry about the way I write it, it sounds like demanding. Its because I'm still learning Jquery. Thanks everyone!

    Read the article

  • Google and Bing Map APIs Compared

    - by SGWellens
    At one of the local golf courses I frequent, there is an open grass field next to the course. It is about eight acres in size and mowed regularly. It is permissible to hit golf balls there—you bring and shag our own balls. My golf colleagues and I spend hours there practicing, chatting and in general just wasting time. One of the guys brings Ginger, the amazing, incredible, wonder dog. Ginger is a Portuguese Pointer. She chases squirrels, begs for snacks and supervises us closely to make sure we don't misbehave.     Anyway, I decided to make a dedicated web page to measure distances on the field in yards using online mapping services. I started with Google maps and then did the same application with Bing maps. It is a good way to become familiar with the APIs. Here are images of the final two maps: Google:  Bing:   To start with online mapping services, you need to visit the respective websites and get a developers key. I pared the code down to the minimum to make it easier to compare the APIs. Google maps required this CSS (or it wouldn't work): <style type="text/css">     html     {         height: 100%;     }       body     {         height: 100%;         margin: 0;         padding: 0;     } Here is how the map scripts are included. Google requires the developer Key when loading the JavaScript, Bing requires it when the map object is created: Google: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&libraries=geometry&sensor=false" > </script> Bing: <script  type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> </script> Note: I use jQuery to manipulate the DOM elements which may be overkill, but I may add more stuff to this application and I didn't want to have to add it later. Plus, I really like jQuery. Here is how the maps are created: Common Code (the same for both Google and Bing Maps):     <script type="text/javascript">         var gTheMap;         var gMarker1;         var gMarker2;           $(document).ready(DocLoaded);           function DocLoaded()         {             // golf course coordinates             var StartLat = 44.924254;             var StartLng = -93.366859;               // what element to display the map in             var mapdiv = $("#map_div")[0];   Google:         // where on earth the map should display         var StartPoint = new google.maps.LatLng(StartLat, StartLng);           // create the map         gTheMap = new google.maps.Map(mapdiv,             {                 center: StartPoint,                 zoom: 18,                 mapTypeId: google.maps.MapTypeId.SATELLITE             });           // place two markers         marker1 = PlaceMarker(new google.maps.LatLng(StartLat, StartLng + .0001));         marker2 = PlaceMarker(new google.maps.LatLng(StartLat, StartLng - .0001));           DragEnd(null);     } Bing:         // where on earth the map should display         var StartPoint = new  Microsoft.Maps.Location(StartLat, StartLng);           // create the map         gTheMap = new Microsoft.Maps.Map(mapdiv,             {                 credentials: 'Asbsa_hzfHl69XF3wxBd_WbW0dLNTRUH3ZHQG9qcV5EFRLuWEaOP1hjWdZ0A0P17',                 center: StartPoint,                 zoom: 18,                 mapTypeId: Microsoft.Maps.MapTypeId.aerial             });             // place two markers         marker1 = PlaceMarker(new Microsoft.Maps.Location(StartLat, StartLng + .0001));         marker2 = PlaceMarker(new Microsoft.Maps.Location(StartLat, StartLng - .0001));           DragEnd(null);     } Note: In the Bing documentation, mapTypeId: was missing from the list of options even though the sample code included it. Note: When creating the Bing map, use the developer Key for the credentials property. I immediately place two markers/pins on the map which is simpler that creating them on the fly with mouse clicks (as I first tried). The markers/pins are draggable and I capture the DragEnd event to calculate and display the distance in yards and draw a line when the user finishes dragging. Here is the code to place a marker: Google: // ---- PlaceMarker ------------------------------------   function PlaceMarker(location) {     var marker = new google.maps.Marker(         {             position: location,             map: gTheMap,             draggable: true         });     marker.addListener('dragend', DragEnd);     return marker; }   Bing: // ---- PlaceMarker ------------------------------------   function PlaceMarker(location) {     var marker = new Microsoft.Maps.Pushpin(location,     {         draggable : true     });     Microsoft.Maps.Events.addHandler(marker, 'dragend', DragEnd);     gTheMap.entities.push(marker);     return marker; } Here is the code than runs when the user stops dragging a marker: Google: // ---- DragEnd -------------------------------------------   var gLine = null;   function DragEnd(Event) {     var meters = google.maps.geometry.spherical.computeDistanceBetween(marker1.position, marker2.position);     var yards = meters * 1.0936133;     $("#message").text(yards.toFixed(1) + ' yards');    // draw a line connecting the points     var Endpoints = [marker1.position, marker2.position];       if (gLine == null)     {         gLine = new google.maps.Polyline({             path: Endpoints,             strokeColor: "#FFFF00",             strokeOpacity: 1.0,             strokeWeight: 2,             map: gTheMap         });     }     else        gLine.setPath(Endpoints); } Bing: // ---- DragEnd -------------------------------------------   var gLine = null;   function DragEnd(Args) {    var Distance =  CalculateDistance(marker1._location, marker2._location);      $("#message").text(Distance.toFixed(1) + ' yards');       // draw a line connecting the points    var Endpoints = [marker1._location, marker2._location];           if (gLine == null)    {        gLine = new Microsoft.Maps.Polyline(Endpoints,            {                strokeColor: new Microsoft.Maps.Color(0xFF, 0xFF, 0xFF, 0),  // aRGB                strokeThickness : 2            });          gTheMap.entities.push(gLine);    }    else        gLine.setLocations(Endpoints);  }   Note: I couldn't find a function to calculate the distance between points in the Bing API, so I wrote my own (CalculateDistance). If you want to see the source for it, you can pick it off the web page. Note: I was able to verify the accuracy of the measurements by using the golf hole next to the field. I put a pin/marker on the center of the green, and then by zooming in, I was able to see the 150 markers on the fairway and put the other pin/marker on one of them. Final Notes: All in all, the APIs are very similar. Both made it easy to accomplish a lot with a minimum amount of code. In one aerial view, there are leaves on the tree, in the other, the trees are bare. I don't know which service has the newer data. Here are links to working pages: Bing Map Demo Google Map Demo I hope someone finds this useful. Steve Wellens   CodeProject

    Read the article

  • Google and Bing Map APIs Compared

    - by SGWellens
    At one of the local golf courses I frequent, there is an open grass field next to the course. It is about eight acres in size and mowed regularly. It is permissible to hit golf balls there—you bring and shag our own balls. My golf colleagues and I spend hours there practicing, chatting and in general just wasting time. One of the guys brings Ginger, the amazing, incredible, wonder dog. Ginger is a Hungarian Vizlas (or Hungarian pointer). She chases squirrels, begs for snacks and supervises us closely to make sure we don't misbehave. Anyway, I decided to make a dedicated web page to measure distances on the field in yards using online mapping services. I started with Google maps and then did the same application with Bing maps. It is a good way to become familiar with the APIs. Here are images of the final two maps: Google:  Bing:   To start with online mapping services, you need to visit the respective websites and get a developers key. I pared the code down to the minimum to make it easier to compare the APIs. Google maps required this CSS (or it wouldn't work): <style type="text/css">     html     {         height: 100%;     }       body     {         height: 100%;         margin: 0;         padding: 0;     } Here is how the map scripts are included. Google requires the developer Key when loading the JavaScript, Bing requires it when the map object is created: Google: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&libraries=geometry&sensor=false" > </script> Bing: <script  type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> </script> Note: I use jQuery to manipulate the DOM elements which may be overkill, but I may add more stuff to this application and I didn't want to have to add it later. Plus, I really like jQuery. Here is how the maps are created: Common Code (the same for both Google and Bing Maps):     <script type="text/javascript">         var gTheMap;         var gMarker1;         var gMarker2;           $(document).ready(DocLoaded);           function DocLoaded()         {             // golf course coordinates             var StartLat = 44.924254;             var StartLng = -93.366859;               // what element to display the map in             var mapdiv = $("#map_div")[0];   Google:         // where on earth the map should display         var StartPoint = new google.maps.LatLng(StartLat, StartLng);           // create the map         gTheMap = new google.maps.Map(mapdiv,             {                 center: StartPoint,                 zoom: 18,                 mapTypeId: google.maps.MapTypeId.SATELLITE             });           // place two markers         marker1 = PlaceMarker(new google.maps.LatLng(StartLat, StartLng + .0001));         marker2 = PlaceMarker(new google.maps.LatLng(StartLat, StartLng - .0001));           DragEnd(null);     } Bing:         // where on earth the map should display         var StartPoint = new  Microsoft.Maps.Location(StartLat, StartLng);           // create the map         gTheMap = new Microsoft.Maps.Map(mapdiv,             {                 credentials: 'XXXXXXXXXXXXXXXXXXX',                 center: StartPoint,                 zoom: 18,                 mapTypeId: Microsoft.Maps.MapTypeId.aerial             });           // place two markers         marker1 = PlaceMarker(new Microsoft.Maps.Location(StartLat, StartLng + .0001));         marker2 = PlaceMarker(new Microsoft.Maps.Location(StartLat, StartLng - .0001));           DragEnd(null);     } Note: In the Bing documentation, mapTypeId: was missing from the list of options even though the sample code included it. Note: When creating the Bing map, use the developer Key for the credentials property. I immediately place two markers/pins on the map which is simpler that creating them on the fly with mouse clicks (as I first tried). The markers/pins are draggable and I capture the DragEnd event to calculate and display the distance in yards and draw a line when the user finishes dragging. Here is the code to place a marker: Google: // ---- PlaceMarker ------------------------------------   function PlaceMarker(location) {     var marker = new google.maps.Marker(         {             position: location,             map: gTheMap,             draggable: true         });     marker.addListener('dragend', DragEnd);     return marker; } Bing: // ---- PlaceMarker ------------------------------------   function PlaceMarker(location) {     var marker = new Microsoft.Maps.Pushpin(location,     {         draggable : true     });     Microsoft.Maps.Events.addHandler(marker, 'dragend', DragEnd);     gTheMap.entities.push(marker);     return marker; } Here is the code than runs when the user stops dragging a marker: Google: // ---- DragEnd -------------------------------------------   var gLine = null;   function DragEnd(Event) {     var meters = google.maps.geometry.spherical.computeDistanceBetween(marker1.position, marker2.position);     var yards = meters * 1.0936133;     $("#message").text(yards.toFixed(1) + ' yards');    // draw a line connecting the points     var Endpoints = [marker1.position, marker2.position];       if (gLine == null)     {         gLine = new google.maps.Polyline({             path: Endpoints,             strokeColor: "#FFFF00",             strokeOpacity: 1.0,             strokeWeight: 2,             map: gTheMap         });     }     else        gLine.setPath(Endpoints); } Bing: // ---- DragEnd -------------------------------------------   var gLine = null;   function DragEnd(Args) {    var Distance =  CalculateDistance(marker1._location, marker2._location);      $("#message").text(Distance.toFixed(1) + ' yards');       // draw a line connecting the points    var Endpoints = [marker1._location, marker2._location];           if (gLine == null)    {        gLine = new Microsoft.Maps.Polyline(Endpoints,            {                strokeColor: new Microsoft.Maps.Color(0xFF, 0xFF, 0xFF, 0),  // aRGB                strokeThickness : 2            });          gTheMap.entities.push(gLine);    }    else        gLine.setLocations(Endpoints);  }  Note: I couldn't find a function to calculate the distance between points in the Bing API, so I wrote my own (CalculateDistance). If you want to see the source for it, you can pick it off the web page. Note: I was able to verify the accuracy of the measurements by using the golf hole next to the field. I put a pin/marker on the center of the green, and then by zooming in, I was able to see the 150 markers on the fairway and put the other pin/marker on one of them. Final Notes: All in all, the APIs are very similar. Both made it easy to accomplish a lot with a minimum amount of code. In one aerial view, there are leaves on the tree, in the other, the trees are bare. I don't know which service has the newer data. Here are links to working pages: Bing Map Demo Google Map Demo I hope someone finds this useful. Steve Wellens   CodeProject

    Read the article

  • What is the new line marker in an uploaded Word doc?

    - by Donde
    I am attempting to uplaod a Word doc and then write it line by line in HTML. I made a referecne to the Microsoft Word Object Library. Then I use the following code to grab the and put it in a string variable. However, I have tried multiple regex statements to replace the new line character with "" but nothing I have tried has worked... Dim wordApp As New Microsoft.Office.Interop.Word.Application Dim wordDoc As New Microsoft.Office.Interop.Word.Document Dim file As Object = "C:\test.doc" Dim nullobj As Object = System.Reflection.Missing.Value wordDoc = wordApp.Documents.Open(file, nullobj, nullobj, nullobj, nullobj, nullobj, nullobj, nullobj, nullobj, nullobj, nullobj, nullobj) Dim strArticle As String = wordDoc.Content.Text 'It's not finding the new line marker here strArticle = Regex.Replace(strArticle, ControlChars.NewLine, "<BR>")

    Read the article

  • What sort of loop structure to compare checkbox matrix with Google Maps markers?

    - by Kirkman14
    I'm trying to build a map of trails around my town. I'm using an XML file to hold all the trail data. For each marker, I have categories like "surface," "difficulty," "uses," etc. I have seen many examples of Google Maps that use checkboxes to show markers by category. However these examples are usually very simple: maybe three different checkboxes. What's different on my end is that I have multiple categories, and within each category there are several possible values. So, a particular trail might have "use" values of "hiking," "biking," "jogging," and "equestrian" because all are allowed. I put together one version, which you can see here: http://www.joshrenaud.com/pd/trails_withcheckboxes3.html In this version, any trail that has any value checked by the user will be displayed on the map. This version works. (although I should point out there is a bug where despite only one category being checked on load, all markers display anyway. After your first click on any checkbox, the map will work properly) However I now realize it's not quite what I want. I want to change it so that it will display only markers that match ALL the values that are checked (rather than ANY, which is what the example above does). I took a hack at this. You can see the result online, but I can't type a link to it because I am new user. Change the "3" in the URL above to a "4" to see it. My questions are about this SECOND url. (trails_withcheckboxes4.html) It doesn't work. I am pretty new to Javascript, so I am sure I have done something totally wrong, but I can't figure out what. My specific questions: Does anyone see anything glaringly obvious that is keeping my second example from working? If not, could someone just suggest what sort of loop structure I would need to build to compare the several arrays of checkboxes with the several arrays of values on any given marker? Here is some of the relevant code, although you can just view source on the examples above to see the whole thing: function createMarker(point,surface,difficulty,use,html) { var marker = new GMarker(point,GIcon); marker.mysurface = surface; marker.mydifficulty = difficulty; marker.myuse = use; GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); gmarkers.push(marker); return marker; } function show() { hide(); var surfaceChecked = []; var difficultyChecked = []; var useChecked = []; var j=0; // okay, let's run through the checkbox elements and make arrays to serve as holders of any values the user has checked. for (i=0; i<surfaceArray.length; i++) { if (document.getElementById('surface'+surfaceArray[i]).checked == true) { surfaceChecked[j] = surfaceArray[i]; j++; } } j=0; for (i=0; i<difficultyArray.length; i++) { if (document.getElementById('difficulty'+difficultyArray[i]).checked == true) { difficultyChecked[j] = difficultyArray[i]; j++; } } j=0; for (i=0; i<useArray.length; i++) { if (document.getElementById('use'+useArray[i]).checked == true) { useChecked[j] = useArray[i]; j++; } } //now that we have our 'xxxChecked' holders, it's time to go through all the markers and see which to show. for (var k=0; k<gmarkers.length; k++) { // this loop runs thru all markers var surfaceMatches = []; var difficultyMatches = []; var useMatches = []; var surfaceOK = false; var difficultyOK = false; var useOK = false; for (var l=0; l<surfaceChecked.length; l++) { // this loops runs through all checked Surface categories for (var m=0; m<gmarkers[k].mysurface.length; m++) { // this loops through all surfaces on the marker if (gmarkers[k].mysurface[m].childNodes[0].nodeValue == surfaceChecked[l]) { surfaceMatches[l] = true; } } } for (l=0; l<difficultyChecked.length; l++) { // this loops runs through all checked Difficulty categories for (m=0; m<gmarkers[k].mydifficulty.length; m++) { // this loops through all difficulties on the marker if (gmarkers[k].mydifficulty[m].childNodes[0].nodeValue == difficultyChecked[l]) { difficultyMatches[l] = true; } } } for (l=0; l<useChecked.length; l++) { // this loops runs through all checked Use categories for (m=0; m<gmarkers[k].myuse.length; m++) { // this loops through all uses on the marker if (gmarkers[k].myuse[m].childNodes[0].nodeValue == useChecked[l]) { useMatches[l] = true; } } } // now it's time to loop thru the Match arrays and make sure they are all completely true. for (m=0; m<surfaceMatches.length; m++) { if (surfaceMatches[m] == true) { surfaceOK = true; } else if (surfaceMatches[m] == false) {surfaceOK = false; break; } } for (m=0; m<difficultyMatches.length; m++) { if (difficultyMatches[m] == true) { difficultyOK = true; } else if (difficultyMatches[m] == false) {difficultyOK = false; break; } } for (m=0; m<useMatches.length; m++) { if (useMatches[m] == true) { useOK = true; } else if (useMatches[m] == false) {useOK = false; break; } } // And finally, if each of the three OK's is true, then let's show the marker. if ((surfaceOK == true) && (difficultyOK == true) && (useOK == true)) { gmarkers[i].show(); } } }

    Read the article

  • editing a file with vim that has no EOL marker on the last line but has CRLF line endings

    - by rmeador
    I often have to edit script files, the interpreter for which treats files that have an EOL marker on the last line of the file as an error (i.e. the file is treating CRLF as "newlines", not as "line endings"). Currently, I open these files in Vim using binary mode (-b on the command line). It autodetects the lack of EOL on the final line and sets the "noeol" option appropriately, which prevents it from writing an EOL on the last line. Because the file has CRLF line endings, I get lots of ^Ms at the end of my lines (because it interprets only Unix-style line endings in binary mode, it seems). I can't open it in text mode because the "noeol" option is ignored for non-binary files. This is very annoying, and I always have to remember to manually type the ^M at the end of each line! Is there some way I can force it to accept DOS-style line endings in binary mode, or force it to listen to the EOL option in text mode?

    Read the article

  • Is it possible to vertical align listitem marker in a flowdocument?

    - by Oggy
    I want to to align listitem marker to the top, default is alignment to the bottom of the first block. My faulty code: <Grid> <FlowDocumentScrollViewer> <FlowDocument> <List MarkerStyle="Decimal"> <ListItem> <BlockUIContainer> <Grid> <Rectangle Height="100" Fill="HotPink" /> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Picture</TextBlock> </Grid> </BlockUIContainer> <Paragraph>TextTextTextTextTextTextText</Paragraph> </ListItem> </List> </FlowDocument> </FlowDocumentScrollViewer> </Grid>

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >