• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1148
  • Last Modified:

Set map marker to be positioned at bottom of iPhone screen - google maps api

Hello,

I have a google map set up with the marker and info window. All perfect so far. IS there a way to force the marker to not be in the center of the screen just on iPhone (and other small hand held devices)? Similar to using media queries to load new styles, can anything be done to tell the map to be positioned as such to make the marker to be at the bottom of the screen?

The reason is that I have a static menu banner across the top and therefore the infowindow loads behind it. The map is full page background so user can drag it into view, but would be ideal if there was some way to have it load lower down the screen.

Is this possible does anyone know?

Cheers!

Here is my map code:



<script type="text/javascript">
  function initialize() {
 
    // Create an array of styles.
    var greyMapStyles = [
      {
        featureType: "all",
        stylers: [
          { saturation: -80 }
        ]
      },
      {
        featureType: "all",
        stylers: [
          { hue: "#ff0023" },
          { saturation: -100 }
        ]
      }
    ];
 
    // Create a new StyledMapType object, passing it the array of styles,
    // as well as the name to be displayed on the map type control.
    var greyMapType = new google.maps.StyledMapType(greyMapStyles,
      {name: "Grey Map"});
   
    // Create a map object, and include the MapTypeId to add
    // to the map type control.
    var myLatlng = new google.maps.LatLng(49.26365813608108, -123.1362942551117);
    var mapOptions = {
      zoom: 16,
      center: myLatlng,
        disableDefaultUI: true,
      mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'grey_map']
      }
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
   
   
   
   //*************************
     //Repeat this section for each infowindow you want to have displayed at all times
     var marker1 = new google.maps.Marker({
         position: new google.maps.LatLng(49.26365813608, -123.1362942551117),
         map: map,
         icon:"http://www.site.co.uk/images/map-dot.png"
     });
    var content1 = "<div id=\"infoWindow\"><p class=\"firstHeading\">TITLE HERE</p><p class=\"contactLabel\">Address HEre</p></div>"
     var infowindow1 = new google.maps.InfoWindow({
         content: content1
     });
     infowindow1.open(map, marker1);
     google.maps.event.addListener(marker1, 'click', function() {
       infowindow1.open(map,marker1);
     });
     //*************************
     
     
     
     
     
   
   
   //Associate the styled map with the MapTypeId and set it to display.
    map.mapTypes.set('grey_map', greyMapType);
    map.setMapTypeId('grey_map');
   
  }
                                             
</script>
0
igloobob
Asked:
igloobob
  • 5
  • 3
2 Solutions
 
Tom BeckCommented:
I don't know much about developing for small format devices, but I just discovered this and it seems ideal for your purposes. Use an InfoBox instead of an InfoWindow. It's smaller, fully customizable and sits centered below your marker. I was experimenting with it using your code and can offer this snippet to replace what you have for the info window.
//*************************
  //Repeat this section for each infowindow you want to have displayed at all times
  var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(49.26365813608, -123.1362942551117),
      map: map,
      icon:"http://www.pattayaglobus.com/marker-green.png"
  });
  //Create infobox
  var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
                
        var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('tipbox.gif') no-repeat"
                  ,opacity: 0.75
                  ,width: "280px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);
        ib.open(map, marker1);
  
  google.maps.event.addListener(marker1, 'click', function() {
    ib.open(map, marker1);
  });
  //*************************	

Open in new window


You can download the infobox.js include file from here: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/

So, somewhere AFTER your google maps api script include on the page add this script include:

 <script type="text/javascript" src="infobox.js"></script>

With the proper relative path of course.

Here's what it looks like on the map:
InfoBox
0
 
igloobobAuthor Commented:
wow that was swift tommyBoy!

That works great for the smaller screens. Doesn't look quite as nice as the arrow and shadow is lost from the infoWindow but you can't have everything!

I have put it to my client to see which they prefer.

There's not any method to serve up the different versions depending on screensize is there do you know, kind of like a media query but for the scripts?
0
 
Tom BeckCommented:
Yes, i'm sure there is a way to detect screen size at load and change what type of box is displayed depending on available screen real estate. A google search on  'JavaScript detect screen size' should yield some results, but I have no first hand experience.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Tom BeckCommented:
Maybe go this route. Instead of detecting screen size specifically, just check for mobile devices.

http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/

Once you have determined what kind of device is requesting the page it would be a simple matter of creating a conditional statement to display either an info window or an info box.
0
 
igloobobAuthor Commented:
hi tommyBoy,

thank for the steer, I just had a look on there, not really sure what I'm doing though with javascript so no idea how to use this code and then conditional statements,

I need to detect all mobile devices and serve the new maps infobox and if not mobile serve the infowindow

Don't suppose you could give me one last steer on this could you?

Would be MUCH appreciated :)
0
 
Tom BeckCommented:
Realize that as the article states, this is not a way to detect all mobile devices, just the most common. Other than that it is simple to implement. I haven't tested because my test page is not available to a mobile device but you just run the code provided to detect mobile devices first. If the isMobile variable returns true you have a mobile user. Then just define both the info box and the info window and wrap them in a conditional so the code selects the correct one for the situation. Code would look like this (not tested).
<script type="text/javascript" src="infobox_packed.js"></script>
<script type="text/javascript"> 
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};

  function initialize() {

  // Create an array of styles.
  var greyMapStyles = [
    {
      featureType: "all",
      stylers: [
        { saturation: -80 }
      ]
    },
    {
      featureType: "all",
      stylers: [
        { hue: "#ff0023" },
        { saturation: -100 }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var greyMapType = new google.maps.StyledMapType(greyMapStyles,
    {name: "Grey Map"}); 
 
  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var myLatlng = new google.maps.LatLng(49.261, -123.138);
  var mapOptions = {
    zoom: 16,
    center: myLatlng,
      disableDefaultUI: true,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'grey_map']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions); 
 
 // here's the conditional to select either the info window or the infobox for mobile devices 
 if( isMobile.any() ){ 
  
  //*************************
  //Repeat this section for each infowindow you want to have displayed at all times
  var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(49.26365813608, -123.1362942551117),
      map: map,
      icon:"http://www.pattayaglobus.com/marker-green.png"
  });
  //Create infobox
  var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
                
        var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('tipbox.gif') no-repeat"
                  ,opacity: 0.75
                  ,width: "280px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);
        ib.open(map, marker1);
  
  google.maps.event.addListener(marker1, 'click', function() {
    ib.open(map, marker1);
  });
  //*************************	
  
 } else {
  
  //*************************
  //Repeat this section for each infowindow you want to have displayed at all times
  var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(49.261, -123.138),
      map: map,
      icon:"http://www.pattayaglobus.com/marker-green.png"
  });
  var content2 = "<h2 class=\"firstHeading\">Company Name</h2><p class=\"contactLabel\">Address, email etc here</p>"
  var infowindow2 = new google.maps.InfoWindow({
      content: content2
  });
  infowindow2.open(map, marker2);
  google.maps.event.addListener(marker2, 'click', function() {
    infowindow2.open(map,marker2);
  });  
  //*************************
  
 }
  
 //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('grey_map', greyMapType);
  map.setMapTypeId('grey_map');
  
}
</script>

Open in new window


If you only care about iPhone/iPad you change your conditional to
if( isMobile.iOS ){
} else {
}
0
 
igloobobAuthor Commented:
Hi tommyBoy,

once again thank you!! Works a treat :)
0
 
Tom BeckCommented:
Glad it worked. I learned something too, thanks.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now