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

Google Maps API make info window visible instead of marker

Hello,

I have the following script that generates a stylised google map. It has a marker and then the pop up window. I want to change it so the info window is just visible all the time with no marker.

Can anyone help me with how to change the below to make this happen?



<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 mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(49.26365813608108, -123.1362942551117),
      disableDefaultUI: true,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'grey_map']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
      
      var myLatlng = new google.maps.LatLng(49.26365813608108, -123.1362942551117);
  var myOptions = {
    zoom: 16,
    center: myLatlng,
      disableDefaultUI: true,
   mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'grey_map']
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      url: 'http://www.google.com/',
      map: map,
      title:"title here",
        icon:"http://www.site.co.uk/pathtoimage/map-logo.png"
  });
 
 
    var contentString =
      '<div id="siteNotice">'+
     '<h2 class="firstHeading">HEADER</h2>'+
      '<p class="contactLabel">TEXT HERE</p>'+
     
      '</div>';
     
     
     var infowindow = new google.maps.InfoWindow({
      content: contentString
  });
 
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });    
 
 

 //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
  • 4
  • 3
2 Solutions
 
Tom BeckCommented:
I cleaned up the code you posted. There was some duplication and also some code that would be unnecessary if you intend on leaving out markers.

This code shows two info windows that remain visible on the screen (no clicking). The code for them is clearly delineated by //*****
Realize that, as written, the map will always center on the last info window added. Other info windows could be off the screen depending on the end users browser window size. Info windows can also be customized.
Also, you might want to re-think that idea of not having visible markers. If the end user closes an info window, they have no way to open it again because there's no marker to click on. Consider having at least a small dot for a marker. You can use any image, just put the url in the "icon:" property for the marker.
As far as getting the info windows tail to point at specific coordinates, use a site like this one to find the exact coordinates. http://itouchmap.com/latlong.html
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:"#"
  });
  var content1 = "<span style='font-size:1em'>Information window 1</span><p style='font-size:.8em'>Whatever information you want to display for window 1.</p>"
  var infowindow1 = new google.maps.InfoWindow({
      content: content1
  });
  infowindow1.open(map, marker1);
  //*************************	
  
  //*************************
  //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:"#"
  });
  var content2 = "<span style='font-size:1em'>Information window 2</span><p style='font-size:.8em'>Whatever information you want to display for window 2.</p>"
  var infowindow2 = new google.maps.InfoWindow({
      content: content2
  });
  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');
  
}

Open in new window

0
 
igloobobAuthor Commented:
Hi tommyBoy,

that's awesome thank you!

It was my client that requested no marker but your point is a good one so I will definitely add one back in even if it's just a subtle one. I just tried to add a marker and it appears fine and the info window loads visible. If I close the info window though, when I click the marker nothing happens. It is a link as the cursor changes but the info window does not reappear?

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.com/path-to/map-logo.gif"
    });
    var content1 = "<h2 class=\"firstHeading\">Company Name</h2><p class=\"contactLabel\">Address, email etc here</p>"
    var infowindow1 = new google.maps.InfoWindow({
        content: content1
    });
    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');
   
  }
0
 
Tom BeckCommented:
That's not a problem. Just add a click event listener to each info window definition like this:

//*************************
  //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"
  });
  var content1 = "<h2 class=\"firstHeading\">Company Name</h2><p class=\"contactLabel\">Address, email etc here</p>"
  var infowindow1 = new google.maps.InfoWindow({
      content: content1
  });
  infowindow1.open(map, marker1);
  google.maps.event.addListener(marker1, 'click', function() {
    infowindow1.open(map,marker1);
  });
  //*************************
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
igloobobAuthor Commented:
that's fantastic thanks tommyBoy!!

Do you know if there is a way to shift how this loads on IOS devices? The marker seems to be off centre and the infowindow is hidden behind my static nav banner. I'd like to have the marker load at the bottom of the screen if possible on iPhone. Can this be done do you know?
0
 
Tom BeckCommented:
I have zero experience developing for IOS. Probably the point of the info windows tail is centered on the iPhone screen so the rest extends past the edges? No idea if developing this map for IOS requires a different approach or if it is just a matter of customizing the info widow with small screens in mind. I know it is possible to include code to detect if the page is being viewed in a small device but what to do beyond that is something I need learn. Hoping to do that soon. My company switched to Apple computers recently so I have extra incentive.

Post a new question. I'm curious myself.
0
 
igloobobAuthor Commented:
I shall post a new question.

Yes you can use media queries to load different style rules for different screens, I have done this to resize the infowindow but I'm interested to see if it's possible to force the marker to not be centered on screen.

I will post a new question now.

Thanks very much for the help :)
0
 
igloobobAuthor Commented:
tommyBoy, here is the title of the new question so you can keep an eye on it..

"Set map marker to be positioned at bottom of iPhone screen - google maps api"
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: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

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