0
Я создал карту google с несколькими местоположениями с несколькими маркерами. Я пытаюсь использовать пользовательское изображение маркера с информационным окном, содержащим контент, который я выбрал из селектора местоположений, см. Изображение ниже.Пользовательский маркер Google и пользовательское информационное окно
Как получить макет, как показано на изображении ниже.
Примечание: Достигнут пользовательский маркер и отредактирована карта JavaScript.
var locations = [
['Mehdipatnam', 17.3916, 78.4400, 4],
['Panjagutta', 17.4264, 78.4511, 3],
['East Marredpally', 17.4299, 78.5136, 2],
['Tarnaka', 17.4299, 78.5279, 1]
];
var map = new google.maps.Map(document.getElementById('iva_map'), {
zoom: 12,
center: new google.maps.LatLng(17.38, 78.48),
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}#iva_map{
position: relative !important;
width: 100%;
height: 100%;
min-height: 600px;
opacity: 0.8;
z-index: 1;
}
.iva_map_location {
position: relative;
z-index: 1;
font-size: 13px;
}
.iva_location_wrapper {
position: absolute;
left: 0;
right: 50%;
bottom: 0;
top: 0;
}
.iva_location_box {
position: relative;
background-color: #fdfcfc;
margin: 0 auto;
width: 400px;
margin-top: 25%;
padding: 20px;
border-radius: 10px;
z-index: 2;
-webkit-box-shadow: 0px 0px 5px 2px rgba(102, 102, 102, 0.7);
-moz-box-shadow: 0px 0px 5px 2px rgba(102, 102, 102, 0.7);
box-shadow: 0px 0px 5px 2px rgba(102, 102, 102, 0.7);
}
.iva_location_details {
text-align: left;
padding: 30px 0;
background-color: #fdfcfc;
}
.iva_location_head {
font-size: 15px;
font-weight: bold;
margin-bottom: 20px;
overflow: hidden;
}
.iva_location_item{
position: relative;
background-color: #f3f3f3;
border-bottom: 1px solid #e3e2e2;
cursor: pointer;
}
.iva_location_item span {
font-size: 13px;
font-weight: bold;
}
.iva_gd_icon {
position: absolute;
top: 50%;
right: 20px;
margin-top: -13px;
}
.iva_location_active {
background-color: #ec5f41;
color: #ffffff;
}
.iva_location_address {
width: 80%;
font-weight: normal;
margin: 8px 0 0 0;
padding: 0;
}
.iva_location_address li {
list-style: none;
padding-bottom: 5px;
}
.iva_location_title_wrap {
float: left;
}
.iva_select_location {
font-size: 12px;
font-weight: normal;
padding: 0;
margin: 5px 0;
border: 1px solid #ccc;
width: 200px;
border-radius: 3px;
overflow: hidden;
background-color: #ffffff;
background: #ffffff url("http://www.aivahthemes.com/carzone/wp-content/themes/carzone/images/arrowdown.gif") no-repeat 90% 50%;
}
.iva_select_location select {
padding: 10px;
width: 100%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.mapSubheading {
background-color: #ec5f41;
color: #ffffff;
padding: 15px 20px;
}
/* Scrollbar */
.scrollbar {
\t height: 420px;
\t overflow-y: scroll;
}
/* Scrollbar Style */
#scrollbar_style::-webkit-scrollbar-track {
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
\t border-radius: 10px;
\t background-color: #F5F5F5;
}
#scrollbar_style::-webkit-scrollbar {
\t width: 12px;
\t background-color: #F5F5F5;
}
#scrollbar_style::-webkit-scrollbar-thumb {
\t border-radius: 10px;
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
\t background-color: #555;
}
.iva_address_wrap {
position: relative;
margin-left: 50px;
padding: 15px 0;
}
.iva_map_marker {
position: absolute;
background-color: #e7e0e0;
border-bottom: 1px solid #F1F1F1;
left: 0;
bottom: 0;
top: 0;
width: 40px;
}
.iva_location_active .iva_map_marker {
background-color: #db5335;
border-bottom: 1px solid #db5335;
color: #ffffff;
}
.iva_map_marker .fa-map-marker{
position: absolute;
top: 50%;
right: 13px;
margin-top: -13px;
}
.iva_location_details .iva_location_item:last-child { border-bottom: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="iva_map_location">
<div id="iva_map"></div>
<div class="iva_location_wrapper">
<div class="iva_location_box">
<div class="iva_location_details scrollbar" id="scrollbar_style">
<div class="iva_location_head">
<div class="iva_select_location">
<select name="iva_cities" id="iva_cities" class="postform">
<option value="">Select Location</option>
<option value="hyderabad">Hyderabad</option>
<option value="secunderabad">Secunderabad</option>
<option value="secunderabad">Mehendipatnam</option>
</select>
</div>
</div>
<div class="iva_location_item iva_location_active" data-addr="Panjagutta, Hyderabad, Telangana, India" data-lng="78.45113220000007" data-lat="17.4264979">
<span class="iva_gd_icon"><i class="fa fa-map-o fa-2x"></i></span>
<span class="iva_map_marker"><i class="fa fa-map-marker fa-2x"></i></span>
<div class="iva_address_wrap">
<span>Panjagutta Branch</span>
<ul class="iva_location_address">
<li>Panjagutta, Hyderabad, Telangana, India</li>
<li><i class="fa fa-phone fa-fw"></i>123-456-7890</li>
</ul>
</div>
</div>
<div class="iva_location_item" data-addr="Tarnaka, Vijayapuri Colony, Secunderabad, Telangana, India" data-lng="78.5279" data-lat="17.4400">
<span class="iva_gd_icon"><i class="fa fa-map-o fa-2x"></i></span>
<span class="iva_map_marker"><i class="fa fa-map-marker fa-2x"></i></span>
<div class="iva_address_wrap">
<span>Tarnaka Branch</span>
<ul class="iva_location_address">
<li>TarnakaVijayapuri Colony, Secunderabad, Telangana, India</li>
<li><i class="fa fa-phone fa-fw"></i>123-456-7890</li>
</ul>
</div>
</div>
<div class="iva_location_item" data-addr="East Marredpally, Secunderabad, Telangana, India" data-lng="78.5136" data-lat="17.4299">
<span class="iva_gd_icon"><i class="fa fa-map-o fa-2x"></i></span>
<span class="iva_map_marker"><i class="fa fa-map-marker fa-2x"></i></span>
<div class="iva_address_wrap">
<span>East Marredpally Branch</span>
<ul class="iva_location_address">
<li>East Marredpally,Secunderabad, Telangana, India</li>
<li><i class="fa fa-phone fa-fw"></i>123-456-7890</li>
</ul>
</div>
</div>
<div class="iva_location_item" data-addr="Mehdipatnam, Hyderabad, Telangana, India" data-lng="78.4400" data-lat="17.3916">
<span class="iva_gd_icon"><i class="fa fa-map-o fa-2x"></i></span>
<span class="iva_map_marker"><i class="fa fa-map-marker fa-2x"></i></span>
<div class="iva_address_wrap">
<span>Mehdipatnam Branch</span>
<ul class="iva_location_address">
<li>Panjagutta, Hyderabad, Telangana, India</li>
<li><i class="fa fa-phone fa-fw"></i>123-456-7890</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>Для лучшего понимания я приложил скриншот на карте и обеспечить демонстрационный код также.
Это [нить] (http://stackoverflow.com/questions/10161013/how-to-add-an-image-to-infowindow-of-marker-in-google-maps-v3) может помочь вам. – gerardnimo