Learn VBA & Macros in 1 Week!

JavaScript - Trouble Adding Functionality To Google Maps Api...

Full Excel VBA Course - Beginner to Expert

Trouble Adding Functionality To Google Maps Api...	View Content

I'm having a little bit of trouble with setting up a Google map to add markers for events venues.

The page is dynamically created using postcodes from a database which is why the code might look a little strange, but it's the only way I could find to make it work. However, I'm struggling to add any further functionality to the page.

As you will see from the code attached I would like to add buttons to reset the map to it's initial state, plus buttons to show only the "O" markers or the "E" markers. Also, I would ideally only like to see the "O" markers when the page first loads.

I know this is a lot to ask but could anyone please help.

Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HPB Open days and Exhibitions Locator</title>
<style type="text/css">

html {
        
}
body {
        margin: 0;
        padding: 0;
        height: 100%;
		background-color:#000;
}
#map {
        width: 980px;
        height: 580px;
        z-index:1;
		position:relative;
		margin:25px auto;
}


.controls {
        background-color:#597681;
        padding:10px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.controls p {
        margin:0;
		padding:0;
		color:#FFF;
		font-size:12px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext {
        position:absolute;
        top:10px;
        left:0px;
        width:425px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext h2 {
        margin:0;
		padding:10px 20px;
		background-color:#000;
		color:#FFF;
		font-size:24px;
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-style:italic;
		font-weight:normal;
}

.introtext p {
        margin:0;
		padding:10px 20px;
		background-color:#BF443A;
		color:#FFF;
		font-size:12px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext h2 strong {
        font-weight:bold;
}

#postcode {width:150px; color:#999;}

</style>
        
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
function doBlur() {
	if (document.getElementById('postcode').value == '') { document.getElementById('postcode').value = 'Postcode'; document.getElementById('postcode').style.color = '#999'; }
};

function doFocus() {
	if (document.getElementById('postcode').value == 'Postcode') { document.getElementById('postcode').value = ''; document.getElementById('postcode').style.color = '#000'; }
};

function doSwitch() {
	if (document.getElementById('postcode').value == 'Postcode') {alert('Valid postcode required');} else {  usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint); }
};


</script>
  

</head>
<body>

<div id="map">

</div> 


      
<script type="text/javascript">
var map;
var localSearch = new GlocalSearch();

var icon = new GIcon();
icon.image = "markers/yellow_MarkerO.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(10, 0);

var icon2 = new GIcon();
icon2.image = "markers/blue_MarkerE.png";
icon2.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon2.iconSize = new GSize(20, 34);
icon2.shadowSize = new GSize(37, 34);
icon2.iconAnchor = new GPoint(10, 34);
icon2.infoWindowAnchor = new GPoint(10, 0);

var icon3 = new GIcon();
icon3.image = "http://www.google.com/mapfiles/marker.png";
icon3.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon3.iconSize = new GSize(20, 34);
icon3.shadowSize = new GSize(37, 34);
icon3.iconAnchor = new GPoint(10, 34);




function usePointFromPostcode(postcode, callbackFunction) {
	localSearch.setSearchCompleteCallback(null, function() {
		if (localSearch.results[0]) {
			var resultLat = localSearch.results[0].lat;
			var resultLng = localSearch.results[0].lng;
			var anotherpoint = new GLatLng(resultLat,resultLng - 1.20000);
			var point = new GLatLng(resultLat,resultLng);
			callbackFunction(point, anotherpoint);
		}
		else 
		{
			alert("Postcode not found!");
		}
	});
	
	localSearch.execute(postcode + ", UK");
	
}

if (GBrowserIsCompatible()) {
	function createMarker(point,html) {
		var marker4 = new GMarker(point,icon);
		GEvent.addListener(marker4, "click", function() {
			marker4.openInfoWindowHtml(html, {
				noCloseOnClick: false
			});
		});
		return marker4;
	}
	
	function createMarker2(point2,html) {
		var marker2 = new GMarker(point2,icon2);
		GEvent.addListener(marker2, "click", function() {
			marker2.openInfoWindowHtml(html, {
				noCloseOnClick: false
			});
		});
		return marker2;
	}

	var map = new GMap2(document.getElementById("map"));
	
	map.setCenter(new GLatLng(53.80000, -8.41387), 6);
	map.addControl(new GLargeMapControl3D(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)));

}

else {
	alert("Sorry, the Google Maps API is not compatible with this browser");
}




function placeMarkerAtPoint(point, anotherpoint) {
	var marker3 = new GMarker(point,icon3);
	map.addOverlay(marker3);
	map.setCenter(anotherpoint, 8);
}
	
</script>

<script type="text/javascript">
$(document).ready(function(){
	$("#map").append("<div class='introtext'><div class='controls'></div></div>");
	$("#map > .introtext").prepend("<h2>Forthcoming <strong>shows</strong></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris eros, sollicitudin in rhoncus in, pharetra a lorem. Nunc semper lectus ut libero interdum ut pharetra ipsum mattis.</p>");
	$("#map > .introtext > .controls").append("<p>Find a show</p><input type='text' id='postcode' size='10' value='Postcode' onFocus='doFocus();' onBlur='doBlur();' /><input type='submit' value='Search' onClick='doSwitch();' id='yourlocation' /><input type='submit' value='reset' id='iliketoreset' /><input type='submit' value='set E' id='ionlywantex' />    <input type='submit' value='set O' id='ionlywantod' />");
});
</script>

<script type="text/javascript">
	var localSearchBH193HG = new GlocalSearch();
	
	localSearchBH193HG.execute("BH19 3HG, UK");
	localSearchBH193HG.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker(new GLatLng(localSearchBH193HG.results[0].lat,localSearchBH193HG.results[0].lng),'<h2>O Venue 1</h2>'));
	});	
</script>

<script type="text/javascript">
	var localSearchSY79LT = new GlocalSearch();
	
	localSearchSY79LT.execute("SY7 9LT, UK");
	localSearchSY79LT.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker(new GLatLng(localSearchSY79LT.results[0].lat,localSearchSY79LT.results[0].lng),'<h2>O Venue 2</h2>'));
	});	
</script>

<script type="text/javascript">
	var localSearchRG46UT = new GlocalSearch();
	
	localSearchRG46UT.execute("RG4 6UT, UK");
	localSearchRG46UT.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker2(new GLatLng(localSearchRG46UT.results[0].lat,localSearchRG46UT.results[0].lng),'<h2>E Venue 1</h2>'));
	});	
</script>
	
<script type="text/javascript">
	var localSearchPE36GA = new GlocalSearch();
	
	localSearchPE36GA.execute("PE3 6GA, UK");
	localSearchPE36GA.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker2(new GLatLng(localSearchPE36GA.results[0].lat,localSearchPE36GA.results[0].lng),'<h2>E Venue 2</h2>'));
	});	
</script>

</body>
</html>

Full Excel VBA Course - Beginner to Expert

Google Maps Adding A Second Google Map To A Page

Similar Tutorials

View Content

Hi,

I'm not sure where I have translated this incorrectly. I have one google map embedded on my page which works fine. But I wanted to add a second one. I thought the easiest way to do this would be to have a second page which is called later on with all the details on it for the second map. However although I think (this I presume is where I went wrong) I have replicated the instructions correctly the place holder for the second map just remains blank.

This is the code for my called page with the instructions for the second map:
PHP Code:
<?php
echo $_POST['Map'] . '<br />';
?>

<div id="placemap_canvas"></div>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html {height:250px}
    body {height:250px}
    #placemap_canvas {width:100%; height:150px;}
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
        var latlng = new google.maps.LatLng (
<?php

include("dbconnect.php");

            $result = mysql_query("SELECT * FROM regions
            WHERE RegionPId='{$_POST['Map']}'");

            while($row = mysql_fetch_array($result)){
                echo $row['maplink'];
                }

        mysql_close($con);
?>
);
        var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("placemap_canvas"),
            myOptions);

    }

</script>

And this is the script of the main page, just in case I would be better off keeping them both in one place.
Code:

<head>

<script type="text/javascript">
function loadSubPlace(File,ID,Msg,Eile,EID,Esg){
loadXMLDoc1(File,ID,Msg);
	 var mimer = setTimeout(function(){loadXMLDoc1(Eile,EID,Esg)},5000);
}
</script>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css"> 
	html {height:250px}
	body {height:250px}
	#map_canvas {width:30%; height:250px;}
</style>

<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
function initialize() {

		var latlng = new google.maps.LatLng (
<?php

include("dbconnect.php");

			$result = mysql_query("SELECT * FROM countries 
			WHERE Country='{$_SESSION['Country']}'");

			while($row = mysql_fetch_array($result)){
				echo $row['Map'];
				}

		mysql_close($con);
?>);
		var myOptions = {
			zoom: 4,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
			myOptions);
	}

</script>
</head>
<body onload="initialize()">

		<div class="countryright" id="map_canvas">

include("dbconnect.php");

$snowball=explode(';',$_POST['syringa']);
$turnsol=$snowball[1];
$violet =$snowball[2];
$wakerobin=$snowball[3];

global $turnsol;
global $violet;
global $wakerobin;

	echo '<center><b><big>' . $wakerobin. '</big></b></center><br /><br />';

	$result=mysql_query("SELECT * FROM regions
	WHERE country='{$turnsol}' AND region='{$violet}' AND place='{$wakerobin}' AND sub !=''
	ORDER BY sub ASC");

			while($row = mysql_fetch_array($result)){
				$wheat="{$row['RegionPId']};{$turnsol};{$violet};{$wakerobin};{$row['sub']}";
				$tigerlilly=$row['RegionPId'];
				echo '<input type="button" class="button3" name="place" id="place" value="' . $row['sub'] . '" onclick="loadSubPlace(\'getPlace.php\',\'txtHintPlaceSub\',\'hepatica=' . urlencode($wheat) . '\',\'getPlaceMap.php\',\'placemapcanvas\',\'Map=' . urlencode($tigerlilly) . '\');" />';
				}
		echo '<input type="button" class="button3" name="addplace" id="addplace" value="Add Place" onclick="loadXMLDoc1(\'getAddPlaceSub.php\',\'txtHintPlaceSub\', encodeURI(\'addsubplace=' . $_POST['syringa'] . '\'));" />';

echo '<br /><br /><div id="txtHintPlaceSub"></div><br /><br />';

mysql_close($con);

?>

I've cut out the script that doesn't relate to this so I hope I haven't missed anything important.

Adding A Search Function To Google Maps Api

Similar Tutorials

View Content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
I am learning to programme in HTML5 and Java, and I'd like some assistance with what I am sure is a pretty basic matter, if possible please? If anyone can assist it would be most appreciated?

I am using Dreamweaver (latest version)...

This code here below when run produces a google map with a street address look up input.

I am wanting to learn how to look up an address and submit this to resolve within the map, and also to insert a place holder... I'd like the look up box to sit within (and overlay) the map top left area - at the moment it sits below the map - which i guess is because I haven't inserted a frame??

Many Thanks grin):

***CODE***

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 5; padding: 5;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="map-canvas"></div>
</body>

<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};

function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}

// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();

for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}

// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]

</script>

<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>

<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</body>
</html>

Adding Marker Numbers Using Google Maps

Similar Tutorials

View Content

I've been looking for a solid solution for how to add numbers to markers. Most that I've seen involve an asp page with a post back of an image based on the query string.

I am trying to do something like what MarkerClusterer does. Here is an example:
http://google-maps-utility-library-v...e_example.html

I've looked over their code and cant seem to pull out the part where it adds the numbers to the marker, I'm still new to jquery.

Here is a link to the source code:
http://google-maps-utility-library-v...erclusterer.js

any help would be appreciated.

Adding Onclick And Href Functionality To Billboard Script

Similar Tutorials

View Content

Hello Everyone,

I am in the process of creating a billboard script for our company front page which will switch between two images. I am using the following script as a base: http://tympanus.net/codrops/2009/12/...query-and-css/

I am eager to learn coding, but am still a novice at it so I was wondering if anyone could assist me with adding the following functionality:

1. Rather than (or perhaps in addition to) having the two images change based on a timer, I'd like to be able to insert a "next" arrow. Therefore I will need assistance in coding a button to change the images from "ad_1" to "ad_2" which is currently done automatically by the interval timer

2. I'd like to make the images clickable with unique destinations (so when you click on "ad_1" it will take you to "link 1", "ad_2" will take you to "link 2"

Below is my current code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Rotating Billboard with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
    </head>
    <body>
        <div class="palmtrees"></div>
        <div class="powerline"></div>
        <div class="city"></div>
        <div class="container">
            <div class="ad">
                <div id="ad_1" class="ad_1">
                    <img class="slice_1" src="ads/ad1_slice01.jpg"/>
                    <img class="slice_2" src="ads/ad1_slice02.jpg"/>
                    <img class="slice_3" src="ads/ad1_slice03.jpg"/>

                </div>
                <div id="ad_2" class="ad_2">
                    <img class="slice_1" src="ads/ad2_slice01.jpg"/>
                    <img class="slice_2" src="ads/ad2_slice02.jpg"/>
                    <img class="slice_3" src="ads/ad2_slice03.jpg"/>

                </div>
            </div>
        </div>
        <div class="billboard"></div>
        <a class="back" href="http://tympanus.net/codrops/2009/12/16/creating-a-rotating-billboard-system-with-jquery-and-css/"><a>
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script>
$(function() {            
    $('#ad_1 > img').each(function(i,e){
        rotate($(this),500,10000,i);
    });
    function rotate(elem1,speed,timeout,i){
        elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
            var other;
            if(elem1.parent().attr('id') == 'ad_1')
                other = $('#ad_2').children('img').eq(i);
            else
                other = $('#ad_1').children('img').eq(i);
                other.animate({'marginLeft':'0px','width':'266px'},speed,function(){
                var f = function() { rotate(other,speed,timeout,i) };
                setTimeout(f,timeout);
            });
        });
    }
});
        </script>
    </body>
</html>

And here is a working example: http://www.santamarinas.com/RS/Tests/Billboard/

Thank you in advance for your help!!

Some Google Maps Help

Similar Tutorials

View Content

Hey

I'm quite new at javascript and am currently in the process of creating a site that embeds google maps using an xml document.

What I'm trying to do is categories the markers on my map.

I am trying to make it so there are check boxes at the bottom and when i check the boxes, i.e. theatres, the markers will appear for the theatres and disappear when unchecked.

Using some example code i have modified, i have so far got the maps to pickup the markers from the xml with the check boxes but the markers are all just on the page and the check boxes dont do anything and I am stuck as to of why.

here's my code:

Code:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Google Maps</title>
    <script src="mykey"></script>
  </head>
 <body style="margin:0px; padding:0px;" onload="initialize()"> 
  
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 550px; height: 450px"></div>
        </td>
        <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div>

        </td>
      </tr>
    </table>
    <form action="#">
      Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> &nbsp;&nbsp;
      Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> &nbsp;&nbsp;
      Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />

    </form>  

<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
  </body>


    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      var side_bar_html = "";
    
     
      var gmarkers = [];
	  var map = null;

      
      function createMarker(point,name,html,category) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
      
		marker.mycategory = category;                                 
        marker.myname = name;
        gmarkers.push(marker);
        
        side_bar_html += '<a href="javascript<b></b>:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
        return marker;
      }

     
 function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(true);
          }
        }
     
        document.getElementById(category+"box").checked = true;
      }

   ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].setVisible(false);
          }
        }
    
        document.getElementById(category+"box").checked = false;
    that we just hid
        infowindow.close();
      }


      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
    
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }

     
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 53.8363,-3.03771), 11);
	  
      GDownloadUrl("categories.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var name = markers[i].getAttribute("name");
          var html = "<b>"+name+"<\/b><p>"+address;
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
          map.addOverlay(marker);
        }

        document.getElementById("side_bar").innerHTML = side_bar_html;
	
        show("theatre");
        hide("golf");
        hide("info");
      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }


    </script>
  </body>

</html>

If anybody help with this and tell me where I am going wrong, it would be much appreciated.

thanks

Some Google Maps Help

Similar Tutorials

View Content

Hey all

I'm quite a newbie at javascript and I'm trying to have links to google maps markers.
I have a page with my embeded google maps on it and some markers.

What I'm basically looking to do is have a web page with a menu down the side and when you click the menu items, the google maps markers would pop up on the map.

For example, city attractions down a side menu and when you click say restaurants, the markers would pop up the location restaurants in a certain place, then you could click pubs and the restaurant markers would dissapear and the pub markers would appear.

Can anyboy help me with this or even direct me to some code that would help.

Thanks all.

Google Maps

Similar Tutorials

View Content

I am using jMapping(http://vigetlabs.github.com/jmapping/) for using jQuery with google maps. What I'm trying to do is add an event listener so that when you click on a marker it will call a function I made within the jMapping function. Does anyone have any clues? everything I've tried doesn't work.

Google Maps

Similar Tutorials

View Content

Hi

I have just started looking at the Google maps, and have atutorial that will get the co-ordinates. What I want this to do, is then populate two fields on a form one called longitude and one called latitude

Code:

function usePointFromPostcode(postcode, callbackFunction) {
  
  localSearch.setSearchCompleteCallback(null, 
    function() {
      
      if (localSearch.results[0]) {    
        var resultLat = localSearch.results[0].lat;
        var resultLng = localSearch.results[0].lng;
        var point = new GLatLng(resultLat,resultLng);
        callbackFunction(point);
      }else{
        alert("Postcode not found!");
      }
    });  
    
  localSearch.execute(postcode + ", UK");
}

Any ideas/tips would be be much appreciated

Google Maps

Similar Tutorials

View Content

I have some problems with intergrating google maps into my page

I cant seem to get a marker to appear on my map. I have tried numerous methods but non seem to work.

I have integrated the google maps on my main site, repositioned and re-sized.

The code below is a test page i work on to get code to work. It's just a map on a page

entire code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 25px; padding: 25px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrxZnpYBNIwzBFVYaDY__BMONEjNEGZaI&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});

</script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

can anybody tell my where i am going wrong and just the map appears with no marker?

thanks

New To Google Maps Api

Similar Tutorials

View Content

I'm completely at a loss how to embed a map with the new google maps api setup. I found a snippet of code that I dropped in with some small database variables pulled in and was done. Then an error came that the API was no good. So I went in and set up an anaccount, got an api and now I just simply have no clue what their instructions are saying I need to do. Gah!

Here's what I originally had:
I now have a Client ID, client secret and stuff. But no clue how to set up this url, etc.
Code:

</script> 
<script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyD4iE2xVSpkLLOXoyqT-RuPwURN3ddScAI"
            type="text/javascript"></script>
            
<script type="text/javascript">
    
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>), 13);
 // Add the latitude/longitude marker to the map
	var point = new GLatLng(<?php echo $c_row['location_longitude']; ?>,<?php echo $c_row['location_latitude']; ?>);
	map.addOverlay(new GMarker(point));
	map.setUIToDefault();
      }
    }

    </script>

<b>Map:<br><br><div id="map_canvas" style="width: 500px; height: 300px; z-index:4000;border-width:medium;border-color:#030;"></div></b>

Help Google Maps Api Code

Similar Tutorials

View Content

Hi,
I'm making a javascript with google maps API.
The concept is that you have to fill in your desired location and that it shows you the route to that location. It has an unchangeable starting location.
I also made it so that you have a description panel. Now when I try to make it so that the description panel is next to the map with the route on, my description panel just drops below my map. I believe this problem is either me f*cking up my div's or my CSS.

Here's what i used for my CSS
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#map_canvas {
height: 100%;
width: 70%
}

#directionsPanel {
float:right;
width:30%;
height 100%
}

@media print {
html, body {
height: auto;
}

#map_canvas {
height: 650px;
}
}
</style>

And here's what i used for my div's
<div id="main" style="width:100%;height:100%">
<div id="map_canvas" style="top:30px;width:70%;height:80%"></div>
<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</div>

Any help regarding this would be much appreciated. (And yes, I'm still new to scriptwriting/coding in general)

Google Maps And Location

Similar Tutorials

View Content

I'm trying to make a map that will show your current location, but also load an xml file to show certain attractions in your area.

I have the code to work for getting your current location, but I can't figure out how to implement loading the xml file and placing markers based off of that xml file.

Here is the code for getting my location:
Code:

function show_position(p)
{
	document.getElementById('current').innerHTML="latitude="+p.coords.latitude.toFixed(2)+" longitude="+p.coords.longitude.toFixed(2);
	var pos=new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
	map.setCenter(pos);
	map.setZoom(14);

	var infowindow = new google.maps.InfoWindow({
	    content: "<strong>yes</strong>"
	});

	var marker = new google.maps.Marker({
	    position: pos,
	    map: map,
	    title:"You are here"
	});

	google.maps.event.addListener(marker, 'click', function() {
	  infowindow.open(map,marker);
	});
	
}
</script >

Can anybody help me figure this out?

Thank you in advance

Google Maps Api, Getting Position Help!

Similar Tutorials

View Content

Hey everyone!
I have been fiddling with this for a while now. I cant seem to make anything work. I have tried geocoding services, get position etc. I am sure it can be done so I was hoping someone here may have some experience with the newest API for google maps, V3.

In my code below I just have a simple map with a marker.. not important. What I am trying to do is, when you drag the little man to switch the map into streetview, I need to display the current latitude and longitude in some input boxes. This needs to happen in streetview mode though which I have not been able to make happen.

Anyone care to lend a few minutes? It must be possible!

Code:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title></title>
<style>
#map_canvas {height: 500px; width:800px;}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: true
    });
	
var markers = [
	
{ lat: 49.202612, lng: -122.879612, name: 'McDonalds', marker: 'default' }];

// Create the markers
for (index in markers) addMarker(markers[index]);
   function addMarker(data) {
   var marker = new google.maps.Marker({
   position: new google.maps.LatLng(data.lat, data.lng),
   map: map,
   title: data.name
   });
   }


   var bounds = new google.maps.LatLngBounds();
   for (index in markers) {
   var data = markers[index];
   bounds.extend(new google.maps.LatLng(data.lat, data.lng));
   }
   map.fitBounds(bounds);
}
</script> 
</head>

<body onload="initialize()"> 
	
<div id="map_canvas"></div>

Streetview Latitude: <input type="text" name="latitude" value="?"><br>
Streetview Longitude: <input type="text" name="longitude" value="?">

</body>
</html>

Google Maps Api V3 - Infowindow Help

Similar Tutorials

View Content

Google Maps Api V3 - Infowindow Help

Similar Tutorials

View Content

Hi guys, I am a new poster and new to google maps.

I have been working on geocoding and I have a problem, the example below works fine, all rollovers and icons work perfectly.

However, the info window will only display for one point. I am assuming I have this line of code in the wrong place.
new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});

Can anyone please help me? I would be so appriciative.

Code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var MarkersArray = [
  ['Oceans Eleven Casino', 33.199931,-117.368917, 4, '<div id="">Oceans Eleven Casino - text</div>', 'images/search.chips.small.png'],
  ['Pala Casino & Resort', 33.359418,-117.10583, 5, '<div id="content">Pala Casino & Resort - text</div>', 'images/search.chips.png'],
  ['Casino Pauma', 33.333271,-116.990626, 3, '<div id="content">Casino Pauma - text</div>', 'images/search.chips.small.png'],
  ['Lucky Lady Casino', 32.75844,-117.075513, 2, '<div id="content">Lucky Lady Casino - text</div>', 'images/search.chips.small.png'],
  ['Palomar Club', 32.75542,-117.13433, 1, 'Palomar Club - text', 'images/search.chips.png']
];


function setMarkers(map, locations) {
  // Add markers to the map
  for (var i = 0; i < locations.length; i++) {

    var MarkersArray = locations[i];
  // Marker sizes are expressed as a Size of X,Y
  var image = new google.maps.MarkerImage(MarkersArray[5],
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(60, 50),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 33));
  var shadow = new google.maps.MarkerImage(MarkersArray[5],
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(75, 60),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 33));
      // Shapes define the clickable region of the icon.
  var shape = {
      coord: [0,0,1,54,59,54,59,0],
      type: 'poly'
  };
	
    var infowindow = new google.maps.InfoWindow({content: MarkersArray[4]});
			
	
    var myLatLng = new google.maps.LatLng(MarkersArray[1], MarkersArray[2]);
    var marker = new google.maps.Marker({position: myLatLng,map: map,shadow: shadow,icon: image,shape: shape,title: MarkersArray[0],zIndex: MarkersArray[3]});
  }
  	new google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
}



function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(32.75542,-117.13433),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  setMarkers(map, MarkersArray);
}
</script>

Javascript + Google Maps Api

Similar Tutorials

View Content

Hey all, I was wondering if someone would be able to help me with a problem I've been having. I'm attempting to find coordinates for several addresses at a time. I'm using a for-loop to loop through an array of addresses. I figured it would be best to have a separate function to evaluate the coordinate given an address, and just call it in every loop.

Note that my code below is simplified (I removed the for loop because that's not where I'm having trouble). I know that the issue is probably because I'm trying to return a value from an anonymous function... I tried making the variable global, I tried having a return line from within the anonymous function, nothing has worked... any tips?

Thanks -- Code follows

Code:

function initialize(){
	
    var geocoder = new google.maps.Geocoder(); // creating a new geocode object
    var locCood = findcood('44106', geocoder);
}

function findcood(addr, geocoder)
{
	var cood;
	if (geocoder) {
		
		geocoder.geocode({'address': addr}, function(results, status, cood){
			if (status == google.maps.GeocoderStatus.OK) 
				cood = results[0].geometry.location;
			
			else { 
                                cood = null;
				alert("Geocode was not successful for the following reason: " + status);

                               }
				
		});
		
	}
	else
	{
		alert("No Geocode");
		cood = null;
	}
	alert(cood);
	return cood;
	

}

Google Maps Just Grey Box?!

Similar Tutorials

View Content

My google maps is showing a grey box and no map?!

Please help me, I got my code from he http://www.powerhut.co.uk/googlemaps/custom_markers.php and uploaded everything to the right place but it's just grey?!

http://79.170.40.235/affordableappli...uk/contact.php

Google Maps Pin Icon

Similar Tutorials

View Content

We got a google maps with a bunch of pins. Each pin is setup to use our blue custom icon image.

I'm trying to make it so that when you click on a pin, that particular pin changes to a green version of the icon, and all the reset stay blue. If the user clicks another pin, it turns green and the previous goes back to blue.

Basicly only the clicked active pin should be green.

Code:

google.maps.event.addListener(markers[indx], 'click', function() {
    this.setIcon("/images/greenmarker.png");
});

Here is my code so far that will change the clicked pin into a green version.

My problem is all attempts to change all pins back to blue prior to changing this clicked pin to green fails bad.

Anyone know how to do this or point me in the right direction?

Google Static Maps Help

Similar Tutorials

View Content

I have a google static map which I spent ages trying to work out what to put in it and now it will not work, or be valid, so I am doing something wrong? Can anyone help Have I set it out the right way, I know it is static but it is still JS I believe.

Code:

<p><img alt="google_static_map" src="http://maps.google.com/maps/api/staticmap?center=51.454863,0.011673&zoom=13&markers=United+Reformed+Church,+111+Burnt+Ash+Road,++Lee,+London+SE12+8RG,+UK&size=250x250&sensor=TRUE /></a></p>

DO I need to put in it a div? I cant do iframes. My editor does not like it at all and it is not showing on the website. I am using XHTML

Google Maps Api Script

Similar Tutorials

View Content

Hello

i have a problem i need to resolve here is the script
Code:

script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script> 
    <script type="text/javascript"> 
 
    var map = null;
    var geocoder = null;
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        geocoder = new GClientGeocoder();
      }
    }
 
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }
    </script> 
  </head> 
 
  <body onload="initialize()" onunload="GUnload()"> 
    <form action="#" onsubmit="showAddress(this.address.value); return false"> 
      <p> 
        <input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" /> 
        <input type="submit" value="Go!" /> 
      </p> 
      <div id="map_canvas" style="width: 500px; height: 300px"></div> 
    </form> 
  </body>

its all working well but i need to use it differently.

Is there a way to make the form submit automatically , i already have the address and i will <php> it from my database.

i want that the map will show in the page as soon as the user clicked on an ad(real estate ad).

Basically what we need here is:
To know how to call the functions and give the address from the database.

<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" />
<input type="submit" value="Go!" />
</p>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</form>
</body>

Is there a way just to use this command without the form onsubmit="showAddress(this.address.value); return false">?

And give the address as a variable ?

and when the page is uploading it will have already passed the address and the map will show

Danny