SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Pls help me with Google Map API

    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 [x] 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

    HTML Code:
     <!-- 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. #2
    SitePoint Member AllyReid's Avatar
    Join Date
    Dec 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ally,

    Found a fix, added this to my css

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

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To fix the close button issue I used

    Code:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •