Pls help me with Google Map API

JavaScript
1

Hey guys,

Just wondering if you can pls have a look at my Google Map at:

http://tinyurl.com/m6emjfz

Having couple of issues with it…

First issue is I can’t make the close button to be visible when clicking the pin locations.

Also my Google Maps plus and minus toggle on the left is not displaying correctly. Do you know what usually causes this bug?

My Javascript code is

 <!-- Google Maps -->
        <div class="google-map">
		<div id="googlemaps" class="google-map google-map-full" style="width:100%; height:325px"></div>

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="js/jquery.gmap.js"></script>

		<script>

			/*
			Map Settings

				Find the Latitude and Longitude of your address:
					- http://universimmedia.pagesperso-orange.fr/geo/loc.htm
					- http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/

			*/

			// Map Markers
			var mapMarkers = [{
				address: "Unit 4 / 190 Abernethy Rd, Belmont WA 6104",
				html: "<strong>Head Office - Perth</strong><br><strong>Unit 4 / 190 Abernethy Rd, Belmont WA 6104</strong><br><br><a href='#' onclick='mapCenterAt({latitude: -31.957626, longitude: 115.929654, zoom: 16}, event)'>[+] Zoom Here</a>",
				icon: {
					image: "images/pin.png",
					iconsize: [26, 46],
					iconanchor: [12, 46]
				}
			},{
				address: "8 Turee Way, Paraburdoo WA 6754",
				html: "<strong>Paraburdoo Office - Paraburdoo</strong><br><strong>8 Turee Way Paraburdoo WA 6754</strong><br><br><a href='#' onclick='mapCenterAt({latitude: -23.205040, longitude: 117.654366, zoom: 16}, event)'>[+] Zoom Here</a>",
				icon: {
					image: "images/pin.png",
					iconsize: [26, 46],
					iconanchor: [19, 46]
				}
			},{
				address: "Lot4/ Mine Rd, Tom Price WA 6751",
				html: "<strong>Tom Price Office - Tom Price</strong><br><strong>Lot4/ Mine Rd, Tom Price WA 6751</strong><br><br><a href='#' onclick='mapCenterAt({latitude: -22.708424, longitude: 117.775175, zoom: 16}, event)'>[+] Zoom Here</a>",
				icon: {
					image: "images/pin.png",
					iconsize: [26, 46],
					iconanchor: [12, 46]
				}
			}];

			// Map Initial Location
			var initLatitude = -26.030257;
			var initLongitude = 115.929654;

			// Map Extended Settings
			var mapSettings = {
				controls: {
					panControl: true,
					zoomControl: true,
					mapTypeControl: true,
					scaleControl: true,
					streetViewControl: true,
					overviewMapControl: true
				},
				scrollwheel: true,
				markers: mapMarkers,
				latitude: initLatitude,
				longitude: initLongitude,
				zoom: 5
			};

			var map = $("#googlemaps").gMap(mapSettings);

			// Map Center At
			var mapCenterAt = function(options, e) {
				e.preventDefault();
				$("#googlemaps").gMap("centerAt", options);
			}

		</script>
		
		</div>
<!-- Google Maps End -->
2

Hi,

Check your CSS for any rules like: img { max-width:100%} that could be being applied to the map.

You could fix this by including something like: .google-map img { max-width : none;} to your CSS.

3

Hi Ally,

It’s definitely got something to do with the width property.

Deleted all my styles for “google-map” and it fixes the problem of the vertical scroll bar. The map is too big though so have to figure out how to resize it. At least I know the cause.

Thank you

4

Hi Ally,

Found a fix, added this to my css

.gmnoprint img {
    max-width: none; 
}
5

To fix the close button issue I used

<style type="text/css">
/** FIX for Bootstrap and Google Maps Info window styes problem **/
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: none;
}
</style>