Map with text marker
HTML:
<div id="map" class="map"></div>
Before </body> tag ends:
<script> $(document).ready(function() { function initialize() { var latlng = {lat: 40.733355, lng: -73.982327}; var mapOptions = { center: latlng, zoom: 14 }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); var marker = new MarkerWithLabel({ position: latlng, map: map, labelContent: '<div class="marker-loaded">< div class="map-marker"><img src="assets/img/f.png" alt=""/></div></div>', labelClass: "marker-style" }); var contentString = '<div id="mapinfo">'+ '<h4 class="firstHeading">Company Name</h4>'+ '<h6>525 W 28th St, New York, NY 10001</h6>' + '<div><i class="fa fa-phone"></i><a href="tel:+4819228383746">+4819228383746</a></div>' + '<div><i class="fa fa-mobile"></i><a href="tel:+4819228383746">+4819228383746</a></div>' + '<p id="at">@</p>'+ '<div class="contactblock"><a href="mailto:info@suburb.com">info@suburb.com</a></div>' + '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); marker.addListener('click', function() { infowindow.open(map, marker); }); } google.maps.event.addDomListener(window, 'load', initialize); }); </script> <script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script> <script type="text/javascript" src="assets/js/markerwithlabel_packed.js"></script>
Map with info-box
All settings of this map type occur in a separate custom-map.js file
HTML:
<div id="map" class="map"></div>
Before </body> tag ends:
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script> <script type="text/javascript" src="assets/js/infobox.js"></script> <script type="text/javascript" src="assets/js/custom-map.js"></script> <script type="text/javascript" src="assets/js/markerwithlabel_packed.js"></script> <script> _latitude = 40.719457; _longitude = -73.989642; createHomepageGoogleMap(_latitude,_longitude); </script>