?
Solved

Google Maps API wil Drop down selection

Posted on 2009-07-10
12
Medium Priority
?
661 Views
Last Modified: 2013-11-23
Hi,

I am a noob when it comes to google maps. I would like to create something like this.

http://www.barcelona.com/map

Which will show all markers in the same catergory when I choose from the drop down menu but the problem is I cannot do it. Been working on it for 5 hours now and I still cannot do it which is very frustrating.

Can someone show me how to do it? or rather send a sample code that can do the selection. Your help is very much appreciated.

Don't give me a complicated one. A simple one will be enough because still a noob. Below is a sample script.

Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ACTUALKEYHERE" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
 
latitude = 48.89364;
longitude = 2.33739;
 
var mapshow = document.markerType.value;
 
function initialize() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map_canvas"));
		var bounds = new GLatLngBounds();
		map.setCenter(new GLatLng(latitude,longitude), 16);
 
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();
 
		function createMarker(point,name,html) {
			var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html);
			});
			i++;
			return marker;
		}
 
		
		if (mapshow==1)
		{
		var i = 0;
var markers=new Array(4);
markers[0] = new Array(48.89494,2.33472,"<center>Marker1</center>");
markers[0] = new Array(48.89116,2.33438,"<center>Marker2</center>");
		}
		
		if (mapshow==2)
		{
		var i = 0;
var markers=new Array(4);
markers[0] = new Array(48.89136,2.34532,"<center>Marker1</center>");
markers[0] = new Array(48.88851,2.34537,"<center>Marker2</center>");
		}
 
		while (i < markers.length) {
			var lat = parseFloat(markers[i][0]);
			var lng = parseFloat(markers[i][1]);
			var point = new GLatLng(lat,lng);
			var html = markers[i][2];
			var label = "";
			var marker = createMarker(point,label,html);
			map.addOverlay(marker);
			bounds.extend(marker.getPoint());
		}
 
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
 
		map.addControl(new GScaleControl());
		map.addControl(new GLargeMapControl());
		map.addControl(new GOverviewMapControl());
		map.addControl(new GMapTypeControl());
	}
}
    //]]>
    </script>
</head>
 
<body onLoad="initialize()" onUnload="GUnload()">
  <select name="mapshow" onchange="initialize()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
<p>
<div class="picborder" id="map_canvas" style="width: 600px; height: 500px"></div>
</body>
</html>

Open in new window

0
Comment
Question by:openaccount1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24829270
Are you having a problem putting markers on the map or something else?
bol
0
 

Author Comment

by:openaccount1
ID: 24837709
yes, the markers just won't load in the map
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24976732
Let me know how the changes below work.  The map and markers show but I am not sure if you get all the markers you want and if the result is what you need.  We might need to fix a little more.
The problems were in the script and the select tag.  Please note the changes in the snippet below.  Let me know if you don't catch them all or have a question.
bol

<script type="text/javascript">
    //<![CDATA[
 
latitude = 48.89364;
longitude = 2.33739;
 
 
function initialize() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map_canvas"));
		var bounds = new GLatLngBounds();
		map.setCenter(new GLatLng(latitude,longitude), 16);
 
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();
 
		function createMarker(point,name,html) {
			var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html);
			});
			i++;
			return marker;
		}
 
		var mapshow = document.getElementById('markerType').value;
		
		if (mapshow==1)
		{
		var i = 0;
var markers=new Array();
markers[0] = new Array(48.89494,2.33472,"<center>Marker1</center>");
markers[1] = new Array(48.89116,2.33438,"<center>Marker2</center>");
		}
		
		if (mapshow==2)
		{
		var i = 0;
var markers=new Array();
markers[0] = new Array(48.89136,2.34532,"<center>Marker1</center>");
markers[1] = new Array(48.88851,2.34537,"<center>Marker2</center>");
		}
 
		for (var i=0; i < markers.length; i++) {
			var lat = parseFloat(markers[i][0]);
			var lng = parseFloat(markers[i][1]);
			var point = new GLatLng(lat,lng);
			var html = markers[i][2];
			var label = "";
			var marker = createMarker(point,label,html);
			map.addOverlay(marker);
			bounds.extend(marker.getPoint());
		}
 
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
 
		map.addControl(new GScaleControl());
		map.addControl(new GLargeMapControl());
		map.addControl(new GOverviewMapControl());
		map.addControl(new GMapTypeControl());
	}
}
    //]]>
    </script>
</head>
 
<body onLoad="initialize()" onUnload="GUnload()">
  <select name="markerType" id="markerType" onchange="initialize()">

Open in new window

0
Prepare for your VMware VCP6-DCV exam.

Josh Coen and Jason Langer have prepared the latest edition of VCP study guide. Both authors have been working in the IT field for more than a decade, and both hold VMware certifications. This 163-page guide covers all 10 of the exam blueprint sections.

 

Author Comment

by:openaccount1
ID: 24976799
The map change action is now working but:

1. The map does not show when page is loaded.
2. When I select one of the selections, the map is changing but only 1 marker is shown per selection.

Below is the updated code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
 
latitude = 48.89364;
longitude = 2.33739;
 
function initialize() {
        if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map_canvas"));
                var bounds = new GLatLngBounds();
                map.setCenter(new GLatLng(latitude,longitude), 16);
 
                var bounds = map.getBounds();
                var southWest = bounds.getSouthWest();
                var northEast = bounds.getNorthEast();
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();
 
                function createMarker(point,name,html) {
                        var marker = new GMarker(point);
                        GEvent.addListener(marker, "click", function() {
                                marker.openInfoWindowHtml(html);
                        });
                        i++;
                        return marker;
                }
 
                var mapshow = document.getElementById('markerType').value;
                
                if (mapshow==1)
                {
                var i = 0;
var markers=new Array(2);
markers[0] = new Array(48.89494,2.33472,"<center>Marker1</center>");
markers[1] = new Array(48.89116,2.33438,"<center>Marker2</center>");
                }
                
                if (mapshow==2)
                {
                var i = 0;
var markers=new Array(2);
markers[0] = new Array(48.89136,2.34532,"<center>Marker1</center>");
markers[1] = new Array(48.88851,2.34537,"<center>Marker2</center>");
                }
 
                for (var i=0; i < markers.length; i++) {
                        var lat = parseFloat(markers[i][0]);
                        var lng = parseFloat(markers[i][1]);
                        var point = new GLatLng(lat,lng);
                        var html = markers[i][2];
                        var label = "";
                        var marker = createMarker(point,label,html);
                        map.addOverlay(marker);
                        bounds.extend(marker.getPoint());
                }
 
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
 
                map.addControl(new GScaleControl());
                map.addControl(new GLargeMapControl());
                map.addControl(new GOverviewMapControl());
                map.addControl(new GMapTypeControl());
        }
}
    //]]>
 
    </script> 
</head>
 
<body>
  <select name="markerType" id="markerType" onchange="initialize()">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
  </select> 
<div class="picborder" id="map_canvas" style="width: 600px; height: 500px"></div>
</body>
</html>

Open in new window

0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 total points
ID: 24976866
Part of the problem was in the code I gave you.  I noticed the 2nd marker missing.  Please look at and use the changes in the code below.  Let me know if it doesn't take care of all the problems (I did not look at the last snippet you posted).

bol

function initialize() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map_canvas"));
		var bounds = new GLatLngBounds();
		map.setCenter(new GLatLng(latitude,longitude), 16);
 
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();
 
		function createMyMarker(point,name,html) {
			var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html);
			});
			return marker;
		}
 
		var mapshow = document.getElementById('markerType').value;
		
		if (mapshow==1)
		{
var markers=new Array();
markers[0] = new Array(48.89494,2.33472,"<center>Marker1</center>");
markers[1] = new Array(48.89116,2.33438,"<center>Marker2</center>");
		}
		
		if (mapshow==2)
		{
var markers=new Array();
markers[0] = new Array(48.89136,2.34532,"<center>Marker1</center>");
markers[1] = new Array(48.88851,2.34537,"<center>Marker2</center>");
		}
		for (var i=0; i < markers.length; i++) {
			var lat = parseFloat(markers[i][0]);
			var lng = parseFloat(markers[i][1]);
			var point = new GLatLng(lat,lng);
			var html = markers[i][2];
			var label = "";
			var marker = createMyMarker(point,label,html);
			map.addOverlay(marker);
			bounds.extend(marker.getPoint());
		}
 
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
 
		map.addControl(new GScaleControl());
		map.addControl(new GLargeMapControl());
		map.addControl(new GOverviewMapControl());
		map.addControl(new GMapTypeControl());
	}
}

Open in new window

0
 

Author Comment

by:openaccount1
ID: 24976891
ok all markers are appearing now but when I add another marker still only 2 marker is shown. I may add markers on one selection and not on the others so is it possible to make the code accept any number of markers.

Also the map is not shown when page is first loaded.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24980878
It shows for me when first loaded.  Also the number of markers shouldn't matter unless you are adding the integer back to the parentheses when you make the array.  Notice my code removes it because it was causing  a problem and isn't needed (or wanted) if the array could have various numbers of keys.
What is your code for the page I provided?  Hopefully the problems are just something missing from it.  Please review the changes I made and code I provided (in my last snippet) but if it still doesn't work then I need to see what you have now.
bol
0
 

Author Comment

by:openaccount1
ID: 25011591
Hi bol,

Yes markers are working. but still map is not showing when page is first loaded. Below is the complete code. Did not include the API key though.

openaccount
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
 
latitude = 48.89364;
longitude = 2.33739;
 
function initialize() {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map_canvas"));
		var bounds = new GLatLngBounds();
		map.setCenter(new GLatLng(latitude,longitude), 16);
 
		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();
 
		function createMyMarker(point,name,html) {
			var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html);
			});
			return marker;
		}
 
		var mapshow = document.getElementById('markerType').value;
		
		if (mapshow==1)
		{
var markers=new Array();
markers[0] = new Array(48.89494,2.33472,"<center>Marker1</center>");
markers[1] = new Array(48.89116,2.33438,"<center>Marker2</center>");
		}
		
		if (mapshow==2)
		{
var markers=new Array();
markers[0] = new Array(48.89136,2.34532,"<center>Marker1</center>");
markers[1] = new Array(48.88851,2.34537,"<center>Marker2</center>");
markers[2] = new Array(48.89136,2.34600,"<center>Marker2</center>");
markers[3] = new Array(48.89136,2.34650,"<center>Marker2</center>");
markers[4] = new Array(48.89136,2.34700,"<center>Marker2</center>");
		}
		for (var i=0; i < markers.length; i++) {
			var lat = parseFloat(markers[i][0]);
			var lng = parseFloat(markers[i][1]);
			var point = new GLatLng(lat,lng);
			var html = markers[i][2];
			var label = "";
			var marker = createMyMarker(point,label,html);
			map.addOverlay(marker);
			bounds.extend(marker.getPoint());
		}
 
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
 
		map.addControl(new GScaleControl());
		map.addControl(new GLargeMapControl());
		map.addControl(new GOverviewMapControl());
		map.addControl(new GMapTypeControl());
	}
}
    //]]>
 
    </script> 
</head>
 
<body>
  <select name="markerType" id="markerType" onchange="initialize()">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select> 
<div class="picborder" id="map_canvas" style="width: 600px; height: 500px"></div>
</body>
</html>

Open in new window

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 25015821
Your body tag doesn't have the script it needs so the Map is loaded when the page loads.  Modify your body tag so it is like the one in the snippet and that should fix this.
bol

<body onLoad="initialize()" onUnload="GUnload()">

Open in new window

0
 

Author Comment

by:openaccount1
ID: 25021224
Excellent its working correctly now.
0
 

Author Closing Comment

by:openaccount1
ID: 31601985
Excellent solution. gave me everything I need.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 25024876
Great!  I am glad I could help.  Thanks for the grade, the points and the fun question.
bol
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.

Question has a verified solution.

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

Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
Java functions are among the best things for programmers to work with as Java sites can be very easy to read and prepare. Java especially simplifies many processes in the coding industry as it helps integrate many forms of technology and different d…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
Suggested Courses
Course of the Month10 days, 4 hours left to enroll

762 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