Пользовательские Google Makers с DataLayer/GeoJson

Question

У меня в настоящее время проблема с маркерами google для отображения пользовательских изображений в зависимости от типа. У меня было это в прошлом, у меня было только одно изображение для всех маркеров.

map.php

var map, 
    infoWindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0,-25)}); 

function initialize() { 

    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     zoom: 12, 
     center: {lat: 53.927895, lng: -1.386487} 
    }); 

    map.data.loadGeoJson('http://customers.auroracomputers.co.uk/customers-json.php'); 

    map.data.addListener('click', function(event) { 
     infoWindow.setContent(
      'Surname: ' + event.feature.getProperty('surname') + '<br>' + 
      'Postcode: ' + event.feature.getProperty('postcode') 
     ); 
     var anchor = new google.maps.MVCObject(); 
     anchor.set("position",event.latLng); 
     infoWindow.open(map,anchor); 


    }); 

    var iconBase = 'http://customers.auroracomputers.co.uk/icons/' 
    var icons = { 
     business: { 
     icon: iconBase + 'business.png' 
     }, 
     home: { 
     icon: iconBase + 'home.png' 
     }, 
     competitor: { 
     icon: iconBase + 'devil.png' 
     } 
    }; 

    function addMarker(feature) { 
    var marker = new google.maps.Marker({ 
    position: feature.position, 
    icon: icons[feature.type].icon, 
    map: map 
    }); 
    } 




    map.data.setStyle({ 
    icon: 'http://customers.auroracomputers.co.uk/icons/home.png', 
    icon: icons[feature.type].icon, 
    icon: icon.competitor.icon 
    }); 






} 

google.maps.event.addDomListener(window, 'load', initialize); 

Клиент-Json.php

for ($i=0;$i<$nrows;$i++){ 

$row = mysqli_fetch_assoc($result); 

?> 
<script> 
    { 
    "type": "Feature", 
    "geometry": { 
    "type": "Point", 
     "coordinates": [<?echo $row['lng'];?>,<?echo $row['lat'];?>] 
    }, 
    "properties": { 
    "surname": "<?echo $row['surname'];?>", 
    "postcode": "<?echo $row['postcode'];?>", 
    "type": "<?echo $row['type'];?>" 
    } 
    }<?php if($i != $nrows-1){ ?>,<?php } ?> 
    </script> 

Answer 1

маркеры GeoJSON оформлены иначе, чем родные маркеры API v3 Google Maps Javascript. См. Style GeoJSON Data in the documentation, в частности раздел, посвященный Change Appearance Dynamically.

map.data.setStyle(function(feature) { 
    var type = feature.getProperty('type') 
    return /** @type {google.maps.Data.StyleOptions} */ ({ 
    icon: icons[type].icon, 
    title: type 
    }); 
}); 

from the reference:

значок Тип: строка | Icon | Символ

Иконка для переднего плана. Если строка предоставлена, она обрабатывается так, как если бы она была значком со строкой в ​​качестве URL-адреса. Используется только для геометрии точек.

proof of concept fiddle

фрагмент кода:

var map, 
 
    infoWindow = new google.maps.InfoWindow({ 
 
    pixelOffset: new google.maps.Size(0, -25) 
 
    }); 
 

 
function initialize() { 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    zoom: 10, 
 
    center: { 
 
     lat: 40.7127837, 
 
     lng: -74.0059413 
 
    } 
 
    }); 
 

 
    // map.data.loadGeoJson('http://customers.auroracomputers.co.uk/customers-json.php'); 
 
    map.data.addGeoJson(testGeoJson) 
 

 
    map.data.addListener('click', function(event) { 
 
    infoWindow.setContent(
 
     'Surname: ' + event.feature.getProperty('surname') + '<br>' + 
 
     'Postcode: ' + event.feature.getProperty('postcode') 
 
    ); 
 
    var anchor = new google.maps.MVCObject(); 
 
    anchor.set("position", event.latLng); 
 
    infoWindow.open(map, anchor); 
 
    }); 
 

 
    var iconBase = 'http://customers.auroracomputers.co.uk/icons/' 
 
    var icons = { 
 
    business: { 
 
     icon: iconBase + 'business.png' 
 
    }, 
 
    home: { 
 
     icon: iconBase + 'home.png' 
 
    }, 
 
    competitor: { 
 
     icon: iconBase + 'devil.png' 
 
    } 
 
    }; 
 

 
    map.data.setStyle(function(feature) { 
 
    var type = feature.getProperty('type') 
 
    return /** @type {google.maps.Data.StyleOptions} */ ({ 
 
     icon: icons[type].icon, 
 
     title: type 
 
    }); 
 
    }); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 
// New York, NY, USA (40.7127837, -74.00594130000002) 
 
// Newark, NJ, USA (40.735657, -74.1723667) 
 
var testGeoJson = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-74.0059413, 40.7127837] 
 
    }, 
 
    "properties": { 
 
     "surname": "York", 
 
     "postcode": " 10007", 
 
     "type": "home" 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [-74.1723667, 40.735657] 
 
    }, 
 
    "properties": { 
 
     "surname": "Newark", 
 
     "postcode": "07102", 
 
     "type": "business" 
 
    } 
 
    }] 
 
};

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

Answer 2

Одно я отмечаю это источник JSON поврежден, надеюсь, следующий может помочь получить, что отсортированный.

<?php 
    /* 
     Customer-Json.php 
     ----------------- 
     The original code had thousands of `<script>` & `</script>` tags 
     which meant it was not valid json. 

     I have assumed that the previous loop can be replaced with the 
     more usual recordset iteration loop as shown below. 

     Each row has items added to the json array which gets echoed at the 
     end - there is not need for the script tags at all - just include the 
     correct headers. 
    */ 

    /* store data to be sent */ 
    $json=array(); 

    /* using object notation for ease */ 
    while($row=mysqli_fetch_object($result)){ 

     $surname=$row->surname; 
     $postcode=$row->postcode; 
     $lat=$row->lat; 
     $lng=$row->lng; 
     $type=$row->type; 



     $json[]=array(
      'type'  => 'Feature', 
      'geometry' => array(
       'type'   => 'Point', 
       'coordinates' => array($lng, $lat) 
      ), 
      'properties' => array(
       'surname' => $surname, 
       'postcode' => $postcode, 
       'type'  => $type 
      ) 
     ); 
    } 

    $json=json_encode($json); 
    header('Content-Type: application/json'); 
    echo $json; 
?>