I am using Google Maps for my website and I wander how can I use the Markers as links? I mean when I click a marker to open a particular link.
Thank you in advance!
That's actually very easy to do. Simply attach an event handler to your marker, and then launch the link by setting window.location.href to your URL. Check out the following examples, which I think should be self explanatory:
Using the v3 API:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Marker as a Link</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(35.55, -25.75),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
url: 'http://www.google.com/',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
</script>
</body>
</html>
Using the V2 API:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Marker as a Link</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
var centerPoint = new GLatLng(35.55, -25.75);
map.setCenter(centerPoint, 2);
var marker = new GMarker(map.getCenter());
marker.url = 'http://www.google.com/';
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
</script>
</body>
</html>
The above examples will add a marker somewhere in the atlantic ocean. When you click on it, you'll be forwarded to a popular search engine.
To get this to open in a new tab add the following right after the "window.location.href = marker.url;":
window.open(this.url, '_blank');
So you would have:
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
window.open(this.url, '_blank');
});
Related
I am currently creating a website for a school project. I have created a code that should display a map with some markers and some lines that represent borders between countries. The problem is that when I load this map I can display the lines but the markers all disappeared. Any help would be very appreciated. I alredy own a valid key.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=MYKEY" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 768px; height: 512px"></div>
<form action="#">
<input type="button" value="hide" onclick="map.removeOverlay(kml)" />
<input type="button" value="show" onclick="map.addOverlay(kml)" />
</form>
<script type="text/javascript">
var mapProp= {
center:new google.maps.LatLng(41.8919300, 12.5113300),
zoom:3,
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var kml = new GGeoXml("http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml");
map.addOverlay(kml);
var imageitaly = 'https://MYWEBSITE/mypath/wp-content/uploads/2019/02/italyscaled.png';
var Rome = {lat: 41.6500086, lng: 12.5113300};
var markerrm = new google.maps.Marker({
position: Rome,
map: map,
title: 'Italia',
icon: imageitaly
});
markerrm.addListener('click', function() {
window.location.href = ('https://MYWEBSITE/mypath/italia');
});
</script>
</body>
</html>
Google map is showing grey box or sometimes show nothing/white
i googled some links and try their ways but didn't work for me.
Any solution?
i tried to change the zoom but still not working
Console shows no error
<head>
<script src="http://maps.google.com/maps?file=api&v=3&hl=en&key=GOOGLE_GENERATED_API&sensor=true"type="text/javascript"></script>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
infowindow.open(map,marker);
}
</script>
</head>
<body onload="myMap()">
<?php include '/layout/header.php';?>
<!-- Contact Us Content -->
<div class="container-fluid">
<div id="map" style="width: 800px; height: 400px; overflow:visible;"> </div>
</div>
</body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&hl=en&key=GOOGLE_GENERATED_API&sensor=true" ></script>
<!--OR-->
<script src="https://maps.google.com/maps/api/js?file=api&v=3&hl=en&key=GOOGLE_GENERATED_API&sensor=true"></script>
On this link replace text GOOGLE_GENERATED_API with your google api key.
Showing perfect on my side. Which error you get on your browser consollog ?
your maps API cdn is not correct. Maybe you get this error google is not define.
google.maps.event.addDomListener (myMap); ADD this line or you can remove the onload from body and add this
google.maps.event.addDomListener (window, 'load', myMap);
Additionaly I have added a click function on marker. If you have any question ask me in comment.
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
google.maps.event.addDomListener (myMap);
//google.maps.event.addDomListener (window, 'load', myMap);
// if you use the window load myMap You don't need onload function on body tag
}
#map{
width: 800px;
height: 400px;
overflow:visible;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&"></script>
</head>
<body onload="myMap()">
<div class="container-fluid">
<div id="map"></div>
</div>
</head>
I have an external json which I am trying to overlay on a google map. The overall plumbing works fine.
The map gets generated. Data gets iterated, and markers are placed by reading the coordinates. But the when i look at the map the coordinates are way off on the map. The data set can not be wrong, i can give my word on that. Is there some adjustment I need to make to get this thing map to each other. Here is my 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: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.748433, -73.985655),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
var image = 'http://soumghosh.com/otherProjects/doitt/images/marker.png';
$.getJSON("http://data.cityofnewyork.us/resource/jfzu-yy6n.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.facility_address.latitude, data.facility_address.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
icon:image
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>
Assume I have put a marker at a specific location on the Map.
I want the program to open a pop-up window called bla.php when the user click on this marker.
This is what I already done to put the marker:
<!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: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxVucBtLP4XefoM4syoigBgXntwkVGxv8&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(48, 2),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var position = new google.maps.LatLng(48,2);
var marker = new google.maps.Marker({
position: position,
map: map
});
marker.setTitle("pv-unit");
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
I tried it, the whole map is not loading
First you need an event listener for your marker. Then within that, whatever code you want for opening a popup, e.g.
google.maps.event.addListener(marker, 'click', function() {
window.open('blah.php','name','height=200,width=150');
});
So I am preparing a page which has a Google Map and there are two forms namely latitude and longitude , and a submit button.
On entering the longitude and latitude the map is centered to the desired location and puts a marker there.
The problem I am facing is that whenever I put a new lat/long , the old marker won't go.
So basically if entered first lat/long : 10/12 , it would center to that and place a marker there, but when i enter the second lat/long (say) : 11/12 , it would center to that too and place a marker there also while the first one is not removed.
I want the page to be whenever the a new entered in the form only that one reflects in the form no old markers.
Here's my CODE :
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(11.6667,76.2667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
var marker = new google.maps.Marker({
map: map,
position: panPoint,
});
}
</script>
</head>
<body>
Latitude:<input type="text" id="lat" >
Longitude:<input type="text" id="lng">
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
Some help would be useful
You need to clear markers each time in order to do that.
To clean marker keep marker as global variable, eg.
function pan() {
try{
marker.setMap(null);//clear marker
}
catch(err){
}
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
//declare marker as global variable
marker = new google.maps.Marker({
map: map,
position: panPoint,
});
}
That should do the trick.
use this code
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var markersArray=[];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(11.6667,76.2667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
deleteOverlays();
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
var marker = new google.maps.Marker({
map: map,
position: panPoint,
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body>
Latitude:<input type="text" id="lat" >
Longitude:<input type="text" id="lng">
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
In the pan function before adding the new marker, try to remove all the present markers Google Maps API v3: How to remove all markers?