谷歌地圖API多個標記客戶圖像

首先，我是一個偉大的時間谷歌地圖API /編程新手。谷歌地圖API多個標記客戶圖像

我們在零售店出售濾水器。我想製作一張地圖，其中包含一個地圖上的所有零售店。這樣客戶可以找到最近的零售店來購買我們的產品。每個零售店的標誌是它的標誌。

我有一個很難顯示每個零售店的具體標誌。只有默認的谷歌地圖紅色引腳即將上映。

請參閱以下內容：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
     type="text/javascript"></script> 
</head> 
<body> 
<div id="map" style="width: 705px; height: 410px;"></div> 
<script type="text/javascript"> 

var locations = [ 
['Metro Gross Market - GÜNEŞLİ',41.030258,28.814306,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/metro.png'], 
['Tekzen Yapı Market - İSTANBUL MERTER',41.001022,28.888908,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen.png'], 
['Bauhaus - BAKIRKÖY',40.997486,28.885653,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/bauhaus.png'], 
['Baumax - SAMSUN',41.263283,36.349628,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/baumax.png'], 
['Saturn - FORUM İSTANBUL',41.044228,28.897497,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/saturn.png'], 
['Media Markt - Adana M1 AVM',37.019440,35.241714,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/mediamarkt.png'], 
['Banio Yapı Market - İZMİR GAZİEMİR',38.331020,27.134804,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/banio.png'] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
panControl: false, 
zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.LEFT_CENTER 
}, 
scaleControl: true, 
scaleControlOptions: { 
    position: google.maps.ControlPosition.BOTTOM_LEFT 
}, 
streetViewControl: false, 


    zoom: 6, 
    center: new google.maps.LatLng(39, 33.3), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 




var infowindow = new google.maps.InfoWindow(); 

var marker, i; 

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

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 
</script> 
</body> 
</html>

來源

2013-08-03 Bora Akgerman

首先，你需要做的就是把所有的代碼放到一個功能是什麼。這應該只在頁面加載時才被調用。這可以防止您的內嵌JavaScript嘗試在Google Maps API加載之前執行的可能問題。

這樣你就不必把所有的javascript都放到頁面的主體中。

例如把你的現有代碼...

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
     type="text/javascript"></script> 

<script type="text/javascript"> 
function initialize() { 
var locations = [ 
['Metro Gross Market - GÜNEŞLİ',41.030258,28.814306,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/metro.png'], 
['Tekzen Yapı Market - İSTANBUL MERTER',41.001022,28.888908,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/tekzen.png'], 
['Bauhaus - BAKIRKÖY',40.997486,28.885653,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/bauhaus.png'], 
['Baumax - SAMSUN',41.263283,36.349628,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/baumax.png'], 
['Saturn - FORUM İSTANBUL',41.044228,28.897497,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/saturn.png'], 
['Media Markt - Adana M1 AVM',37.019440,35.241714,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/mediamarkt.png'], 
['Banio Yapı Market - İZMİR GAZİEMİR',38.331020,27.134804,0,'http://www.bmbsuaritma.com.tr/images/retail_logos/banio.png'] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
panControl: false, 
zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.LEFT_CENTER 
}, 
scaleControl: true, 
scaleControlOptions: { 
    position: google.maps.ControlPosition.BOTTOM_LEFT 
}, 
streetViewControl: false, 


    zoom: 6, 
    center: new google.maps.LatLng(39, 33.3), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 




var infowindow = new google.maps.InfoWindow(); 

var marker, i; 

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

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

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
<div id="map" style="width: 705px; height: 410px;"></div> 
</body> 
</html>

來源

2013-08-03 08:40:38 duncan

感謝我讓你提到的，現在更清潔的變化。 –

添加「圖標」屬性，你傳遞給標記對象的選項：

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: locations[i][4], 
    animation: google.maps.Animation.DROP 
    }); 

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

來源

2013-08-03 08:57:57 astupidname

謝謝你的工作！ –

谷歌地圖API多個標記客戶圖像

回答

相關問題