• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1269
  • 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

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