Advertisement
Guest User

Maps JS

a guest
Apr 10th, 2012
249
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var map, geocoder, icon;
  2. var markers = {}, polygons = {};
  3. var searchResults = {
  4.     'california': [
  5.         {
  6.             seller: 'Robert De Niro',
  7.             price: 100.0,
  8.             latitude: 36.70834,
  9.             longitude: -119.54618
  10.         },
  11.         {
  12.             seller: 'Jessica Alba',
  13.             price: 80.0,
  14.             latitude: 36.83567,
  15.             longitude: -119.69193
  16.         },
  17.         {
  18.             seller: 'Larry Page',
  19.             price: 90.0,
  20.             latitude: 35.37114,
  21.             longitude: -119.03961
  22.         }],
  23.     'washington': [
  24.         {
  25.             seller: 'Barack Obama',
  26.             price: 120.0,
  27.             latitude: 38.90787,
  28.             longitude: -77.00360
  29.         },
  30.         {
  31.             seller: 'Hillary Clinton',
  32.             price: 200.0,
  33.             latitude: 38.95147,
  34.             longitude: -77.06188
  35.         },
  36.         {
  37.             seller: 'Collin Powel',
  38.             price: 50.0,
  39.             latitude: 38.90893,
  40.             longitude: -77.04446
  41.         }],
  42.     'florida': [
  43.         {
  44.             seller: 'Diego de la Vega',
  45.             price: 45.0,
  46.             latitude: 25.78011,
  47.             longitude: -80.68909
  48.         },
  49.         {
  50.             seller: 'Versacce',
  51.             price: 864.0,
  52.             latitude: 29.73576,
  53.             longitude: -83.18848
  54.         },
  55.         {
  56.             seller: 'Don Fransisco',
  57.             price: 10.0,
  58.             latitude: 28.07683,
  59.             longitude: -82.43042
  60.         }],
  61.     'ny': [
  62.         {
  63.             seller: 'Madona',
  64.             price: 9999.9,
  65.             latitude: 40.71435,
  66.             longitude: -74.00597
  67.         },
  68.         {
  69.             seller: 'Ben Stiler',
  70.             price: 350.0,
  71.             latitude: 40.68044,
  72.             longitude: -73.99541
  73.         },
  74.         {
  75.             seller: 'Kofi Annan',
  76.             price: 150.0,
  77.             latitude: 40.77118,
  78.             longitude: -73.98983
  79.         }],
  80.     'utah': [
  81.         {
  82.             seller: 'Heat',
  83.             price: 20.0,
  84.             latitude: 39.34492,
  85.             longitude: -110.78888
  86.         },
  87.         {
  88.             seller: 'Snake',
  89.             price: 10.0,
  90.             latitude: 39.37465,
  91.             longitude: -111.30249
  92.         },
  93.         {
  94.             seller: 'Cowboy',
  95.             price: 50.0,
  96.             latitude: 39.01492,
  97.             longitude: -111.84357
  98.         }],
  99.     'la': [
  100.         {
  101.             seller: 'Pimp My Ride',
  102.             price: 200.0,
  103.             latitude: 34.04932,
  104.             longitude: -118.25057
  105.         },
  106.         {
  107.             seller: 'Surfers',
  108.             price: 600.0,
  109.             latitude: 34.02478,
  110.             longitude: -118.51021
  111.         },
  112.         {
  113.             seller: 'Juan Valdez',
  114.             price: 300.0,
  115.             latitude: 34.05380,
  116.             longitude: -118.22954
  117.         }],
  118.     'default' : []
  119. };
  120.  
  121. $(document).ready(function () {
  122.     loadScript();
  123.     $('#search_address_button').click(function () {
  124.         var address = $('#search_address_text').val();
  125.         searchAddress(address);
  126.     });
  127.     $('#search_address_text').click(function (event) {
  128.         var keyDown = (event.keyCode ? event.keyCode : event.which);
  129.         if (keyDown == 13)
  130.             searchAddress();
  131.     });
  132.     $('.state_address').click(function () {
  133.         var address = $(this).attr('address');
  134.         if (address == "all")
  135.             searchAllAddress();
  136.         else
  137.             searchAddress(address, true);
  138.     });
  139. });
  140.  
  141. function loadScript()
  142. {
  143.     var script = document.createElement("script");
  144.     script.type = "text/javascript";
  145.     script.src = "http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=false&callback=initialize";
  146.     document.body.appendChild(script);
  147. }
  148.  
  149. function initialize()
  150. {
  151.     var myOptions = {
  152.         zoom: 4,
  153.         center: new google.maps.LatLng(38.68551, -99.22852),
  154.         mapTypeId: google.maps.MapTypeId.ROADMAP,
  155.         minZoom: 4,
  156.         maxZoom: 16
  157.     }
  158.  
  159.     geocoder = new google.maps.Geocoder();
  160.     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  161.     image = new google.maps.MarkerImage('img/beachflag.png',
  162.     // This marker is 20 pixels wide by 32 pixels tall.
  163.       new google.maps.Size(20, 32),
  164.     // The origin for this image is 0,0.
  165.       new google.maps.Point(0, 0),
  166.     // The anchor for this image is the base of the flagpole at 0,32.
  167.       new google.maps.Point(0, 32));
  168.  
  169.     google.maps.event.addListener(map, 'click', function (event) {
  170.         addMarker(event.latLng);
  171.     });
  172.  
  173.  // Bounds for North America
  174.    var strictBounds = new google.maps.LatLngBounds(
  175.      new google.maps.LatLng(28.70, -127.50),
  176.      new google.maps.LatLng(48.85, -55.90)
  177.    );
  178.  
  179.    // Listen for the dragend event
  180.    google.maps.event.addListener(map, 'dragend', function() {
  181.         if (strictBounds.contains(map.getCenter())) return;
  182.  
  183.         // We're out of bounds - Move the map back within the bounds
  184.  
  185.         var c = map.getCenter(),
  186.             x = c.lng(),
  187.             y = c.lat(),
  188.             maxX = strictBounds.getNorthEast().lng(),
  189.             maxY = strictBounds.getNorthEast().lat(),
  190.             minX = strictBounds.getSouthWest().lng(),
  191.             minY = strictBounds.getSouthWest().lat();
  192.  
  193.         if (x < minX) x = minX;
  194.         if (x > maxX) x = maxX;
  195.         if (y < minY) y = minY;
  196.         if (y > maxY) y = maxY;
  197.  
  198.         map.setCenter(new google.maps.LatLng(y, x));
  199.     });
  200. }
  201.  
  202. function addMarker(location, name)
  203. {
  204.     if (name == undefined) name = "default";
  205.     if (markers[name] == undefined) markers[name] = [];
  206.  
  207.     var marker_number = markers[name].length;
  208.     var contentString = '<div id="marker_info"><h2>Excelente localidad</h2></div>';
  209.  
  210.     var infowindow = new google.maps.InfoWindow({
  211.         content: contentString,
  212.         maxWidth: 150
  213.     });
  214.  
  215.     var marker = new google.maps.Marker({
  216.         position: location,
  217.         map: map,
  218.         icon: image,
  219.         title: location.name
  220.     });
  221.  
  222.     google.maps.event.addListener(marker, 'mouseover', function () {
  223.         infowindow.open(map, marker);
  224.     });
  225.  
  226.     google.maps.event.addListenerOnce(marker, 'click', function () {
  227.         $('#marks').append('<a href="#" marker="' + marker_number + '">Delete - ' + marker_number + '</a>');
  228.         $('[marker=' + marker_number + ']').click(function () {
  229.             removeMarker("default", marker_number);
  230.             $(this).hide();
  231.         });
  232.     });
  233.  
  234.     markers[name].push(marker);
  235.     addSearchResult(name, '', 0.0, location.lat(), location.lng());
  236. }
  237.  
  238. function addSearchResult(name, seller, price, latitude, longitude) {
  239.     if (searchResults[name] == undefined) searchResults[name] = [];
  240.     searchResults[name].push(
  241.         {
  242.             seller: seller,
  243.             price: price,
  244.             latitude: latitude,
  245.             longitude: longitude
  246.         });
  247. }
  248.  
  249. function showMarker(name, number)
  250. {
  251.     markers[name][number].setMap(map);
  252. }
  253.  
  254. function hideMarker(name, number)
  255. {
  256.     markers[name][number].setMap(null);
  257. }
  258.  
  259. function removeMarker(name, number)
  260. {
  261.     markers[name][number].setMap(null);
  262.     markers[name][number] = null;
  263.     swap(markers[name], number, markers[name].length - 1);
  264.     markers[name].length -= 1;
  265. }
  266.  
  267. function removePolygon(name)
  268. {
  269.     if (polygons[name] == undefined) return;
  270.     polygons[name].setMap(null);
  271.     polygons[name] = null;
  272. }
  273.  
  274. function removeMarkers(name)
  275. {
  276.     for (marker in markers[name])
  277.     {
  278.         markers[name][marker].setMap(null);
  279.         markers[name][marker] = null;
  280.     }
  281.     markers[name] = []
  282. }
  283.  
  284. function swap(array, a, b)
  285. {
  286.     var aux = array[a];
  287.     array[a] = array[b];
  288.     array[b] = aux;
  289. }
  290.  
  291. function addHouseMarker(name, house) {
  292.  
  293.     var lat = house.latitude;
  294.     var lng = house.longitude;
  295.     var location = new google.maps.LatLng(lat, lng);
  296.     var marker_number = markers.length;
  297.     var contentString = '<div id="marker_info"><div id="house_price">' + house.price + '</div></div>';
  298.  
  299.     var infowindow = new google.maps.InfoWindow({
  300.         content: contentString,
  301.         maxWidth: 50,
  302.         maxHeigth: 50
  303.     });
  304.  
  305.     var marker = new google.maps.Marker({
  306.         position: location,
  307.         map: map,
  308.         icon: image,
  309.         title: location.name
  310.     });
  311.  
  312.     google.maps.event.addListener(marker, 'mouseover', function () {
  313.         infowindow.open(map, marker);
  314.     });
  315.  
  316.     google.maps.event.addListener(marker, 'click', function () {
  317.         $('#house_details').empty();
  318.         $('#house_details').append('<div id="house_photo">Photo</div><br /><table><tr><td>Vendedor</td><td id="house_seller">' + house.seller + '</td></tr>' +
  319.                         '<tr><td>Precio</td><td id="house_price">' + house.price + '</td></tr></table><br />');
  320.     });
  321.  
  322.     if (markers[name] == undefined) markers[name] = [];
  323.     markers[name].push(marker);
  324. }
  325.  
  326. function addHousesPolygon(name, coordinates)
  327. {
  328.     var polygon= new google.maps.Polygon({
  329.         paths: coordinates,
  330.         strokeColor: "#000000",
  331.         strokeOpacity: 0.0,
  332.         strokeWeight: 3,
  333.         fillColor: "#00FF00",
  334.         fillOpacity: 0.35
  335.     });
  336.  
  337.     polygon.setMap(map);
  338.  
  339.     var contentString = '<div id="polygon_info"><div id="polygon_name">' + name + '</div></div>';
  340.  
  341.     var infowindow = new google.maps.InfoWindow({
  342.         content: contentString,
  343.         maxWidth: 150
  344.     });
  345.  
  346.     google.maps.event.addListener(polygon, 'mouseover', function (event) {
  347.         infowindow.setPosition(event.latLng);
  348.         infowindow.open(map);
  349.     });
  350.  
  351.     polygons[name] = polygon;
  352. }
  353.  
  354. function searchAddress(address, remove)
  355. {
  356.     var houses = searchResults[address];
  357.  
  358.     if (houses == undefined) {
  359.         geocoder.geocode({ 'address': address }, function (results, status) {
  360.             if (status == google.maps.GeocoderStatus.OK) {
  361.                 map.setCenter(results[0].geometry.location);
  362.                 alert(results[0].geometry.location.latitude + ', ' + results[0].geometry.location.longitude);
  363.             }
  364.             else
  365.                 alert("Geocode was not successful for the following reason: " + status);
  366.         });
  367.     }
  368.     else if (houses.length == 0) return;
  369.     else
  370.     {
  371.  
  372.         var maxX = -360.0,
  373.             maxY = -360.0,
  374.             minX = 360.0,
  375.             minY = 360.0;
  376.         var coordinates = []
  377.  
  378.         if (remove)
  379.         {
  380.             for (name in searchResults)
  381.             {
  382.                 removeMarkers(name);
  383.                 removePolygon(name);
  384.             }
  385.         }
  386.  
  387.         for (house in houses) {
  388.             if (houses[house].longitude < minX) minX = houses[house].longitude;
  389.             if (houses[house].longitude > maxX) maxX = houses[house].longitude;
  390.             if (houses[house].latitude < minY) minY = houses[house].latitude;
  391.             if (houses[house].latitude > maxY) maxY = houses[house].latitude;
  392.  
  393.             addHouseMarker(address, houses[house]);
  394.             coordinates.push(new google.maps.LatLng(houses[house].latitude, houses[house].longitude));
  395.         }
  396.  
  397.         addHousesPolygon(address, coordinates);
  398.  
  399.         var southWest = new google.maps.LatLng(minY, minX),
  400.             northEast = new google.maps.LatLng(maxY, maxX);
  401.         var bounds = new google.maps.LatLngBounds(southWest, northEast);
  402.  
  403.         map.fitBounds(bounds);
  404.  
  405.         var center_location = new google.maps.LatLng((minY + maxY) / 2, (minX + maxX) / 2);
  406.         map.setCenter(center_location);
  407.     }
  408. }
  409.  
  410. function searchAllAddress() {
  411.     var maxX = -360.0,
  412.         maxY = -360.0,
  413.         minX = 360.0,
  414.         minY = 360.0;
  415.  
  416.     for (address in searchResults) {
  417.         var houses = searchResults[address];
  418.         var coordinates = []
  419.  
  420.         for (house in houses) {
  421.             if (houses[house].longitude < minX) minX = houses[house].longitude;
  422.             if (houses[house].longitude > maxX) maxX = houses[house].longitude;
  423.             if (houses[house].latitude < minY) minY = houses[house].latitude;
  424.             if (houses[house].latitude > maxY) maxY = houses[house].latitude;
  425.  
  426.             addHouseMarker(address, houses[house]);
  427.             coordinates.push(new google.maps.LatLng(houses[house].latitude, houses[house].longitude));
  428.         }
  429.  
  430.         addHousesPolygon(address, coordinates);
  431.     }
  432.  
  433.     var southWest = new google.maps.LatLng(minY, minX),
  434.         northEast = new google.maps.LatLng(maxY, maxX);
  435.     var bounds = new google.maps.LatLngBounds(southWest, northEast);
  436.  
  437.     map.fitBounds(bounds);
  438.  
  439.     var center_location = new google.maps.LatLng((minY + maxY) / 2, (minX + maxX) / 2);
  440.     map.setCenter(center_location);
  441. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement