custom google map polyline

У меня есть функциональная пользовательская карта Google, работающая в качестве фона страницы на демонстрационном веб-сайте, который я создаю. Код карты, а также DIV он содержится в следующим образом:custom google map polyline

<div id="fullBG" style="')" ><script> 
function initMap() { 
    var customMapType = new google.maps.StyledMapType([ 
    { 
    "featureType": "administrative.province", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    },{ 
    "featureType": "landscape.man_made", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    }, 
{ 
     } 

], { 
     name: 'Custom Style' 
    }); 
    var customMapTypeId = 'custom_style'; 

    var map = new google.maps.Map(document.getElementById('fullBG'), { 
    zoom: 4, 
    center: {lat: 46.902983, lng: -41.742671}, 
    streetViewControl: false, 
    mapTypeControlOptions: { 
    mapTypeIds: [] 

    } 
    }); 
map.mapTypes.set(customMapTypeId, customMapType); 
    map.setMapTypeId(customMapTypeId); 
} 



    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=[my API key]&signed_in=false&callback=initMap" 
     async defer></script></div>

Я пытаюсь добавить простую ломаную линию в соответствии с рекомендациями на страницах разработчиков на Google со следующим кодом:

var flightPlanCoordinates = [ 
    {lat: 37.772, lng: -122.214}, 
    {lat: 21.291, lng: -157.821}, 
    {lat: -18.142, lng: 178.431}, 
    {lat: -27.467, lng: 153.027} 
    ]; 
    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
}

Я пробовал вставлять код полилинии в разных местах кода карты, но я не могу заставить его работать. Я также попытался изменить некоторые переменные, но опять же безрезультатно.

Это привело к разочарованию и осознанию того, что мне нужно узнать больше об основах, а не пытаться объединить решение, но в то же время, если кто-нибудь может посоветовать, как получить эту строку, я бы очень благодарен!

источник

2015-12-15 Chris L

[Я вижу полилинию, если добавить его в свой код (он идет от западного побережья США до Австралии)] (HTTP://jsfiddle.net/uwp965sp/) – geocodezip

Это определенно не работает с этой целью. Неважно! Спасибо за ответ. –

Вы видите полилинию в [моей скрипке] (http://jsfiddle.net/uwp965sp/)? Если да, то как ваш код отличается от кода в скрипке. Просьба представить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. – geocodezip

Я играл немного с вами код ..

это похоже на работу

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <title>Simple Polygon</title> 
     <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     #map, #fullBG { 
      height: 100%; 
     } 
     </style> 
    </head> 
    <body> 
<div id="fullBG" ></div> 
    <script> 

    function initMap() { 
     var customMapType = new google.maps.StyledMapType([ 
     { 
     "featureType": "administrative.province", 
     "stylers": [ 
      { "visibility": "off" } 
     ] 
     },{ 
     "featureType": "landscape.man_made", 
     "stylers": [ 
      { "visibility": "off" } 
     ] 
     }, 
    { 
      } 

    ], { 
      name: 'Custom Style' 
     }); 


     var customMapTypeId = 'custom_style'; 

     var map = new google.maps.Map(document.getElementById('fullBG'), { 
     zoom: 4, 
     center: {lat: 46.902983, lng: -41.742671}, 
     streetViewControl: false, 
     mapTypeControlOptions: { 
     mapTypeIds: [] 

     } 
     }); 
     map.mapTypes.set(customMapTypeId, customMapType); 
     map.setMapTypeId(customMapTypeId); 

     var flightPlanCoordinates = [ 
      {lat: 37.772, lng: -122.214}, 
      {lat: 21.291, lng: -157.821}, 
      {lat: -18.142, lng: 178.431}, 
      {lat: -27.467, lng: 153.027} 
     ]; 

     var flightPath = new google.maps.Polyline({ 
      path: flightPlanCoordinates, 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 

     flightPath.setMap(map); 

    } 

    </script> 
    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
    </body> 
    </html>

я обнаружил четыре ошибки

ключи API Google не правильно установить
сценарий внутри карты div
стиль не подходит вам правильно fullBG ДИВ
и размер карты не деление с выставиться

источник

2015-12-15 19:09:46 scaisEdge

Спасибо - я пытался вызвать скрипт через настраиваемое поле в Wordpress, и в итоге я стал ужасно запутаться. С вашей помощью и другими комментариями мне удалось разобраться - спасибо! –

Если мой ответ правильный, отметьте его как принятый или полезный. – scaisEdge

custom google map polyline

ответ

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