I'm using directions for Google Maps V3 API. However I get the javscript error when i run it:
Uncaught ReferenceError: request is not defined
This is my JS code:
<script type="text/javascript">
var directionDisplay; //NEW CODE
var directionsService = new google.maps.DirectionsService(); //NEW CODE
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE
var latlng = new google.maps.LatLng(1.288693,103.846733);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
directionsDisplay.setMap(map);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
google.maps.event.addListener(marker1, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
});
google.maps.event.addListener(marker1, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
});
google.maps.event.addListener(marker1, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
google.maps.event.addListener(marker2, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
});
google.maps.event.addListener(marker2, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
});
google.maps.event.addListener(marker2, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
var LatLngList = [
new google.maps.LatLng(1.288693,103.846733),
new google.maps.LatLng(1.288693,103.846733)
];
}
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
}
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
}
//NEW CODE FOR NEW FUNCTION
function calcRoute() {
var start = "35 Oxford Street, Cambridge, MA 02138";
var end = "24 Oxford Street, Cambridge, MA 02138";
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
}
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
</script></head>
You are defining request inside the scope of calcRoute() but then trying to use it outside immedately afterwards outside of calcRoute(). Define it in the same scope where you will use it.
It appears that there might be a few other errors in there too. Here's the end result of my trying to make minimal edits to get your code to work. Hope it helps!
<html>
<head>
<title>Maps Test</title>
<script type="application/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<h1>Map</h1>
<div id="map_canvas" style="height:100%; width:100%;"></div>
<script type="text/javascript">
var directionsDisplay; //NEW CODE
var directionsService = new google.maps.DirectionsService(); //NEW CODE
directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE
var latlng = new google.maps.LatLng(1.288693,103.846733);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
directionsDisplay.setMap(map);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
google.maps.event.addListener(marker1, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
});
google.maps.event.addListener(marker1, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
});
google.maps.event.addListener(marker1, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
google.maps.event.addListener(marker2, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
});
google.maps.event.addListener(marker2, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
});
google.maps.event.addListener(marker2, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
var LatLngList = [
new google.maps.LatLng(1.288693,103.846733),
new google.maps.LatLng(1.288693,103.846733)
];
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
}
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
}
var start = "35 Oxford Street, Cambridge, MA 02138";
var end = "24 Oxford Street, Cambridge, MA 02138";
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
</script>
</body>
</html>
Related
I am trying to set a radius around my marker the radius is set in my SQL database and that radius should show around the marker this is my current code
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh0MbGxFVti1rJkypMgs8548dN4wr6oKY"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("<?php echo $url; ?>", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var MSISDN = markers[i].getAttribute("lbs_msisdn");
var Time = markers[i].getAttribute("lbs_time");
var Radius = markers[i].getAttribute("distance");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<b>" + MSISDN + "</b> <br/>" + Time;
// var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
// icon: icon.icon
});
var cirlcle = new google.maps.Circle({
strokeColor: "#00F",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#00F",
fillOpacity: 0.10,
map: map,
center: point,
radius: 1*markers[i].getAttribute("distance")
});
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('MicrosoftXMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
}
google.maps.event.addDomListener(window, "load", load);
</script>
I have updated the code with the multiply in it and still not receiving the circles around the marker
Your code generates a javascript error: InvalidValueError: setRadius: not a number, because the result of markers[i].getAttribute("distance") is a string, not a number. Use parseFloat, parseInt or multiply it by a number (1*markers[i].getAttribute("distance") to solve that.
Proof of concept fiddle
code snippet:
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// downloadUrl("SO_20160101.xml", function(data) {
var xml = parseXml(xmlData); // data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
var radius = 0;
for (var i = 0; i < markers.length; i++) {
var MSISDN = markers[i].getAttribute("lbs_msisdn");
var Time = markers[i].getAttribute("lbs_time");
var Radius = markers[i].getAttribute("distance");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<b>" + MSISDN + "</b> <br/>" + Time;
var marker = new google.maps.Marker({
map: map,
position: point,
});
var circle = new google.maps.Circle({
strokeColor: "#00F",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#00F",
fillOpacity: 0.10,
map: map,
center: point,
radius: 1 * markers[i].getAttribute("distance")
});
if (circle.getRadius() > radius) {
radius = circle.getRadius();
map.fitBounds(circle.getBounds());
}
bindInfoWindow(marker, map, infoWindow, html);
}
// map.fitBounds(bounds);
// });
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('MicrosoftXMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
}
google.maps.event.addDomListener(window, "load", load);
var xmlData = '<markers><marker lbs_msisdn="27827910119" lbs_time="15:09:32" lat="-26.0" lng="28.0" distance="300"/><marker lbs_msisdn="27827910119" lbs_time="19:07:32" lat="-26.2726" lng="28.2179" distance="1206"/><marker lbs_msisdn="27827910119" lbs_time="19:08:56" lat="-26.2726" lng="28.2179" distance="1206"/><marker lbs_msisdn="27827910119" lbs_time="19:21:29" lat="-26.2726" lng="28.2179" distance="1206"/><marker lbs_msisdn="27827910119" lbs_time="21:58:13" lat="-26.2615" lng="28.2037" distance="148"/><marker lbs_msisdn="27827910119" lbs_time="22:01:43" lat="-26.2615" lng="28.2037" v="148"/><marker lbs_msisdn="27827910119" lbs_time="22:02:07" lat="-26.2615" lng="28.2037" distance="148"/><marker lbs_msisdn="27827910119" lbs_time="22:02:42" lat="-26.2615" lng="28.2037" distance="148"/><marker lbs_msisdn="27827910119" lbs_time="22:13:15" lat="-26.2615" lng="28.2037" distance="148"/><marker lbs_msisdn="27827910119" lbs_time="20:19:30" lat="-26.2615" lng="28.2037" distance="148"/></markers>';
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I have been following a tutorial to set up a google map for my website here and I have completed this, however I now want a custom info box that pops up when you click the icon. (at the moment it pops up with googles default)
I was trying to use this code to do it, but every time I try none of the icons appear.
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var labelText = "City Hall";
var myOptions = {
content: labelText
,boxStyle: {
border: "1px solid black"
,textAlign: "center"
,fontSize: "8pt"
,width: "50px"
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,position: new google.maps.LatLng(49.47216, -123.76307)
,closeBoxURL: ""
,isHidden: false
,pane: "mapPane"
,enableEventPropagation: true
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
This is the part that im changing at the moment
var infoWindow = new google.maps.InfoWindow;
to this
var infoWindow = new infoBox(myOptions);
.
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
Any help to say where i'm going wrong would be appreciated
Assuming that you have included the infobox-library and the php-file returns the expected XML there is nothing wrong except of this:
var infoWindow = new infoBox(myOptions);
it has to be:
var infoWindow = new InfoBox(myOptions);
//-------------------^
The code below will display the city, state chosen by user from previous page of website. However, map first loads LatLong location, then opens city, state. How can the LatLong variable be eliminated so it does not load? Just want city, state to display.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var marker;
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
showAddress('"<?php echo $_SESSION['city_name']; ?>"');
}
function showAddress(address) {
geocoder.geocode({'address': address}, function(results, status) {
if (status != google.maps.GeocoderStatus.OK) {
return;
}
if (results.length > 1) {
alert('Multiple addresses found; showing first one ...');
}
$.each(results, function(i, item) {
var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());
marker.setPosition(location);
map.setCenter(location);
return false;
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
You know you could always find the lat-long for the specific city you are looking for and zoom to the right level to fit the area into view. That's how I used it.
Or you could use the geocoder result to send value to latlang
So you will need to call geocoder.geocode() before you initialize the map
Use the line already in your code:
var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());
and then place this after:
var latlng = location;
Then use the latlng to initialize the map
So you code should look like this:
<script type="text/javascript">
var geocoder;
var map;
var marker;
function initialize() {
/*Go through the following to understand what I'm trying to get at.*/
var address = "<?php echo $_SESSION['city_name']; ?>";
geocoder = new google.maps.Geocoder(); // This was removed from below. Compare with your code.
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlang = results[0].geometry.location; }
else { alert("The location cannot be mapped"); }
});
/* Up until here. */
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: true
});
showAddress('"<?php echo $_SESSION['city_name']; ?>"');
}
function showAddress(address) {
geocoder.geocode({'address': address}, function(results, status) {
if (status != google.maps.GeocoderStatus.OK) {
return;
}
if (results.length > 1) {
alert('Multiple addresses found; showing first one ...');
}
$.each(results, function(i, item) {
var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());
marker.setPosition(location);
map.setCenter(location);
return false;
});
});
}
</script>
This should work.
I need help:
I have to create a map showing the marker when the user clicks on the input checbox.
example:
I click "hotels" and I see only the hotels.
I click no more hotels, disappearing markers on the map
The code:
<script type="text/javascript">
(function() {
window.onload = function(){
var latlng = new google.maps.LatLng(37.8530665, 15.287916300000006);
var options = {
zoom: 14,
center: latlng,
backgroundColor: '#fff',
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var markers = new Array();
$(".chek").click(function() {
if($(this).is(':checked')) {
var id_checkbox = $(this).val();
$.post("ajax.php?page=mapHome",{ id_checkbox:id_checkbox }, function(data) {
for (i=0; i < data.marker.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.marker[i].latitude, data.marker[i].longitude),
animation: google.maps.Animation.DROP,
map: map,
title: data.marker[i].nome,
icon: data.marker[i].marker
});
markers[i] = marker;
markers[i].id_cat = data.marker[i].id_cat;
}// for
},"json");//json
} else {
//hide markers on the map
for (i = 0; i < markers.length; i++) {
if(id_checkbox == markers[i].id_cat) {
markers[i].setMap(null);
}
}
}
});
}
})();
</script>
I do a query through json and show results.
I see setMap(null); but no setMap(map);
I'm having an issue with setting up the info windows for multiple markers in google map api. Basically, Im getting the latitudes and longitudes and everything else from external Json file. I'm parsing it correctly because markers are showing on the map. However, when I'm trying to add an info window for each one of them it only show info window for the most recent added marker + whenever I point on different marker it will still go to this latest marker showing its info window. Here's the source code:
function initialize()
{
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("tab14"), myOptions);
/* Sets up markers */
markers = [];
for (var i = 0, coordinates; coordinates = data.coords[i]; i++)
{
//marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var marker = new google.maps.Marker({position: LatLng, icon: iconImage });
var contentString = '<div>'+
'<div>'+
'</div>'+
'<h4>'+coordinates.title+'</h1>'+
'<div>'+
'<p>'+coordinates.excerpt+'</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
markers.push(marker);
}
/* Sets up marker clusterer */
var markerCluster = new MarkerClusterer(map, markers);
}
Can someone please give me some help with this? Thanks.
//Edited------------------------------------------------------
So I've changed it and now it looks like this:
infoWindow = new google.maps.InfoWindow();
for (var i = 0, coordinates; coordinates = data.coords[i]; i++)
{
//marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var marker = new google.maps.Marker({position: LatLng, icon: iconImage });
var contentString = '<div>'+
'<div>'+
'</div>'+
'<h4>'+coordinates.title+'</h1>'+
'<div>'+
'<p>'+coordinates.excerpt+'</p>'+
'</div>'+
'</div>';
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map,marker);
});
markers.push(marker);
}
/* Sets up marker clusterer */
var markerCluster = new MarkerClusterer(map, markers);
Still doesn't work :/
As far as I know, you can only have one InfoWindow. You should add a onclick event to each marker in which you define the content of the window.
I think you should change:
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
to something like:
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
The infoWindow should be defined outside your for loop.
Good luck!
** EDIT **
I think you need to use unique names for your markers.
This is a working example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&key=
<<INSERT YOUR KEY HERE>>" type="text/javascript"></script>
<script>
function initialize() {
// Create google map
var latlng = new google.maps.LatLng(31.0293534,5.1736923);
var myOptions = {
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 1,
backgroundColor: "#99B3CC",
mapTypeControl: false
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infoWindow = new google.maps.InfoWindow();
/**
* First marker
*/
var latLng = new google.maps.LatLng(31.0293534,5.1736923);
var marker1 = new google.maps.Marker({
map: map,
position: latLng,
visible: true
});
google.maps.event.addListener(marker1, 'click', function() {
infoWindow.setContent("Some content Marker 1");
infoWindow.open(map,marker1);
});
/**
* Second marker
*/
var latLng = new google.maps.LatLng(25.271139,55.307485);
var marker2 = new google.maps.Marker({
map: map,
position: latLng,
visible: true
});
marker2.onclick = function() {
infoWindow.setContent("Some content marker2");
infoWindow.open(map,marker2);
};
google.maps.event.addListener(marker2, 'click', function() {
infoWindow.setContent("Some content marker2");
infoWindow.open(map,marker2);
});
}
window.onload=initialize;
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>
You may have to change the key. But at my place this works like a charm. The most simple example I can give you.
Ok I've found a solution to this. It's kinda a hack but it works for me. I'm putting it here in case someone else would need it:
<script type="text/javascript">
/* Sets up the map with markers */
function initialize()
{
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("tab14"), myOptions);
/* Sets up markers */
markers = [];
infoWindow = new google.maps.InfoWindow();
for (var i = 0, coordinates; coordinates = data.coords[i]; i++)
{
var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var marker = new google.maps.Marker({position: LatLng, icon: iconImage });
var contentString = '<div>'+
'<h4>'+coordinates.title+'</h1>'+
'<div>'+
'<p>'+coordinates.excerpt+'</p>'+
'</div>'+
'</div>';
addMarker(marker, contentString);
markers.push(marker);
}
/* Sets up marker clusterer */
var markerCluster = new MarkerClusterer(map, markers);
function addMarker(marker, content)
{
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
}
}
</script>