?
Solved

Google Maps API make info window visible instead of marker

Posted on 2012-09-11
7
Medium Priority
?
2,197 Views
Last Modified: 2012-09-14
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
Comment
Question by:igloobob
  • 4
  • 3
7 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 38392747
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
 

Author Comment

by:igloobob
ID: 38393125
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
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 2000 total points
ID: 38393232
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
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.

 

Author Comment

by:igloobob
ID: 38396007
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38396089
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
 

Author Comment

by:igloobob
ID: 38397884
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
 

Author Comment

by:igloobob
ID: 38397903
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question