Google지도 : 모든 아이콘에 맞춤 아이콘 및 라벨 가능

Question

Google지도를 처음 사용합니다!

나는 JQuery & xml을 사용하여 여러 마커가있는 Google지도를 표시하는 코드를 발견했습니다.

라이브 Example

나는 내가 사용하고이

$(document).ready(function() { 
    $("#map").css({ 
     height: 500, 
     width: 800 
    }); 
    var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267); 
    MYMAP.init('#map', myLatLng, 11); 

    $("#map"); 
     MYMAP.placeMarkers('markers.xml'); 
    }); 

var MYMAP = { 
    map: null, 
    bounds: null 
} 

MYMAP.init = function(selector, latLng, zoom) { 
    var myOptions = { 
    zoom:zoom, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP  
    } 
    this.map = new google.maps.Map($(selector)[0], myOptions); 
    this.bounds = new google.maps.LatLngBounds(); 
} 

MYMAP.placeMarkers = function(filename) { 
    $.get(filename, function(xml){ 
     $(xml).find("marker").each(function(){ 
      var name = $(this).find('name').text(); 
      var address = $(this).find('address').text();         

         var icon = $(this).find('icon').text(); 

      // create a new LatLng point for the marker 



      var lat = $(this).find('lat').text(); 
      var lng = $(this).find('lng').text(); 
      var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng)); 

      // extend the bounds to include the new point 
      MYMAP.bounds.extend(point); 

      var marker = new google.maps.Marker({         
       position: point, 
       map: MYMAP.map 
      }); 



      var infoWindow = new google.maps.InfoWindow(); 
      var html='<strong>'+name+'</strong.><br />'+address; 
      google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.setContent(html); 
       infoWindow.open(MYMAP.map, marker); 
      }); 
      MYMAP.map.fitBounds(MYMAP.bounds); 
     }); 
    }); 
} 

& XML 코드와 같은 marker.js를 참조하십시오. 내가 원하는 무엇

<marker> 
<name>.hu</name> 
<address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address> 
<lat>47.29</lat> 
<lng>19.05</lng> 
</marker> 

는 모든 마커에 대한 사용자 정의 마커 아이콘 & LABLE입니다.

위의 코드 내에서 작업 할 수 있습니까?

또는 어떻게 이것을 수행 할 수 있습니까?

감사합니다.

Answer 1

수많은 Google 검색 후 나는 실험을 마친 후 &으로 마침내 해결했습니다. 더 쉬운 방법은 Gmaps를 사용자 정의하십시오.

희망 사항은 나와 같은 초보자에게 도움이되기를 바랍니다.

DEMO HERE

감사합니다!

Answer 2

다음과 같이하여이 작업을 수행 할 수 있습니다

new google.maps.Marker({ 
     position: new google.maps.LatLng(latitude, longitude), 
     map: MYMAP.map, 
     icon: new google.maps.MarkerImage("<REPLACE_WITH_MARKER_IMAGE_URL>")}); 

또한, here는 관련 문서입니다.