Маркеры на стильной карте

Я пытаюсь применить массив стилей к карте с маркерами. Это основано на двух рабочих примерах, которые я изо всех сил пытаюсь объединить. Излишне говорить, что я еще не успел.Маркеры на стильной карте

Вот моя идея:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px; } 
    #map_canvas { height: 80% ; width:100%; //*position:(100,0);*//} 
     #content {} 
    </style> 
    <script type="text/javascript" 
    src="http://maps-api-tt.appspot.com/apilite/styled/apiv3.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     function initialize() { 
      var latlng = new google.maps.LatLng(51.795624, 15.724284); 
      var settings = { 
       zoom: 18, 
       center: latlng, 
       mapTypeControl: true, 
       mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT}, 
       navigationControl: false, 
       navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
      var styles = { 
     "map_canvas": [ 
     { 
      featureType: 'all', 
      rules: [ 
       { "invert_lightness": true }, 
       { "weight": 0.5 }, 
       { "lightness": 5 }, 
       { "gamma": 1.58 }, 
       { "saturation": 2 } 
      ] 
     } 
     ] 
    }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
      var contentString = '<div id="content">'+ 
       '<div id="siteNotice">'+ 
       '</div>'+ 
       '<h1 id="firstHeading" class="firstHeading">heading</h1>'+ 
       '<div id="bodyContent">'+ 
       '<p>sample txt</p>'+ 
       '</div>'+ 
       '</div>'; 
      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 

      var companyImage = new google.maps.MarkerImage('images/logoo.png', 
       new google.maps.Size(337,191), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var companyShadow = new google.maps.MarkerImage('images/logoo_shadow.png', 
       new google.maps.Size(337,191), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var companyPos = new google.maps.LatLng(51.796414, 15.724155); 

      var companyMarker = new google.maps.Marker({ 
       position: companyPos, 
       map: map, 
       icon: companyImage, 
       shadow: companyShadow, 
       title:"Kacza Górka Park Sportowy", 
       zIndex: 3}); 

      var skateImage = new google.maps.MarkerImage('images/skate.png', 
       new google.maps.Size(100,100), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var skateShadow = new google.maps.MarkerImage('images/skate_shadow.png', 
       new google.maps.Size(100,100), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var skatePos = new google.maps.LatLng(51.795623, 15.724286); 

      var skateMarker = new google.maps.Marker({ 
       position: skatePos, 
       map: map, 
       icon: skateImage, 
       shadow: skateShadow, 
       title:"skate park", 
       zIndex: 2 
      }); 

      var parkingImage = new google.maps.MarkerImage('images/parking.png', 
       new google.maps.Size(50,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var parkingShadow = new google.maps.MarkerImage('images/parking_shadow.png', 
       new google.maps.Size(70,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(60, 50) 
      ); 

      var parkingPos = new google.maps.LatLng(57.0437, 9.9147); 

      var parkingMarker = new google.maps.Marker({ 
       position: parkingPos, 
       map: map, 
       icon: parkingImage, 
       shadow: parkingShadow, 
       title:"Parking Lot", 
       zIndex: 1 
      }); 

      google.maps.event.addListener(companyMarker, 'click', function() { 
       infowindow.open(map,companyMarker); 
      }); 
     } 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas"></div> 
</body>

Iv'e пытался некоторое время, в настоящее время, но не мог понять, я ценю все входные данные.

источник

2013-03-03 uhl

Ниже приведен чистый пример стилизованной карты. Когда вы нажимаете ссылку «Добавить некоторые маркеры», новые маркеры добавляются на карту.

Для создания новых стилей вашей карты вы можете использовать Google Style Maps Wizard, который автоматически создает объект JSON для перехода к свойству стиля вашего объекта MapOptions, чтобы применить этот стиль к карте Maps API v3.

<!doctype html> 
<html lang="en"> 

    <head> 
     <title>Google Maps</title> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> 
     <script type="text/javascript"> 
      var cityList = [ 
        ['Chicago', 41.850033, -87.6500523, 1], 
        ['Illinois', 40.797177, -89.406738, 2] 
       ], 
       demoCenter = new google.maps.LatLng(41, -87), 
       map, 
       styles = [{ 
        stylers: [{ 
         hue: "#00ffe6" 
        }, { 
         saturation: -20 
        }] 
       }, { 
        featureType: "road", 
        elementType: "geometry", 
        stylers: [{ 
         lightness: 100 
        }, { 
         visibility: "simplified" 
        }] 
       }, { 
        featureType: "road", 
        elementType: "labels", 
        stylers: [{ 
         visibility: "off" 
        }] 
       }]; 

      function initialize() { 
       var styledMap = new google.maps.StyledMapType(styles, { 
         name: "Styled Map" 
        }), 
        mapOptions = { 
         zoom: 7, 
         center: demoCenter, 
         mapTypeControlOptions: { 
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
         } 
        }; 

       map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
       map.mapTypes.set('map_style', styledMap); 
       map.setMapTypeId('map_style'); 
      } 

      function addMarkers() { 
       var marker, 
       i, 
       infowindow = new google.maps.InfoWindow(); 

       for (i = 0; i < cityList.length; i++) { 
        marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
         map: map, 
         title: cityList[i][0] 
        }); 

        google.maps.event.addListener(marker, 'click', (function (marker, i) { 
         return function() { 
          infowindow.setContent(cityList[i][0]); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
       } 
      } 

      $(document).ready(function() { 
       initialize(); 
      }); 

      $(document).on('click', '.add-markers', function (e) { 
       e.preventDefault(); 
       addMarkers(); 
      }); 
     </script> 
    </head> 

    <body> 
     <div id="basic-map"> 
      <div id="map_canvas" style="height:350px;"></div> 
      <a href="#" class="add-markers">Add Some Markers</a> 
     </div> 
    </body> 

</html>

Надеюсь, это поможет.

источник

2013-03-03 09:32:37

Это с чем работать! Большое спасибо :) – uhl

Не могли бы вы пометить мой ответ как правильный, если он решит вашу проблему? благодаря –

Маркеры на стильной карте

ответ

Смежные вопросы