Google地图自定义标记和自定义信息窗口

Question

I have created a google map with multiple locations with multiple markers. I'm trying to use a custom marker image with info window containing the content what I have selected from the location selector, see image below.

How do I get the layout as shown in the image below.

Note: Achieved a custom marker and edited map 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 { height: 420px; overflow-y: scroll; } /* Scrollbar Style */ #scrollbar_style::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #scrollbar_style::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; } #scrollbar_style::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 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> 

For better understanding I have attached screenshot of map and provide a demo code also.

Answer 1

You can use something like that.

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: 'your_custom_icon_URL',
        < -your icon url here
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            var popupString = '<div><b>' + locations[i][0] + '</b></div>'; < -your custom HTML codes with the design here.

            infowindow.setContent(popupString);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

I hope that can help you.

Thanks