I need to embed a map into an HTML widget and I have got some code which works perfectly. I even understand a little bit of the code as I am a JavaScript newbie.
What I need is to be able to add a hyperlink into the info window for each marker. So if I were to click on say "Australia 1" or "Australia 2" if would open up the appropriate webpage. Just to complicate things I need the equivalent of
<a href="https://www.example.com" target="_top">
The code I am using works well and is below!
<div id="map" style="height: 500px; width: 700px; float:left;"></div>
<div id="sidebar" style="height: 500px; width: 200px; float: right;"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var markers = [];
var map;
var infoWin;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
infoWin = new google.maps.InfoWindow();
createMarker(new google.maps.LatLng( -34.397, 150.644), "Woolongong", "Australia 1", map);
createMarker(new google.maps.LatLng( -33.9, 151.1), "Sydney", "Australia 2", map);
}
google.maps.event.addDomListener(window, 'load', initMap);
function createMarker(latlng, name, html, map) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent("<h3>"+name+"</h3>"+html);
infoWin.open(map,marker);
});
Related
I am trying to achieve a cluster google map with sidebar when clicking the sidebar element it needs to show the specific infowindow when selecting particular sidebar elements. I found a tutorial but it was working with external API. But i am trying to achieve is to get with the custom values. I am adding the code which i am adding here.
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBFLmEBCM9NFv4yDK6oXwDKX3FZjmvVqUk'></script>
<script type='text/javascript' src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
</head>
<body>
<div style="width:50%;float:left;">
<div id="map"></div>
<div style="width:50%; float:left;">
Hello 1
Hello 2
Hello 3
Hello 4
</div>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 35.1264,
lng: 33.4299
}
});
var infoWin = new google.maps.InfoWindow();
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon:'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
});
google.maps.event.addListener(marker, 'mouseover', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
// markerCluster.setMarkers(markers);
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [
{
lat: 35.1218939381583,
lng: 33.42075903167722,
info: " Hello 1"
},
{
lat: 35.11596152729056,
lng: 33.42702467193601,
info: " Hello 2"
},
{
lat: 35.116312569544064,
lng: 33.43535024871824,
info: " Hello 3"
},
{
lat: 35.11497860093425,
lng: 33.430372068786596,
info: " Hello 4"
},
];
google.maps.event.addDomListener(window, "load", initMap);
//on click function
function myClick(id) {
google.maps.event.trigger(markers[id], 'click');
}
</script>
<style>
#map {
height: 950px;
}
.map-img{float:left;}
.map-title{width:100%; float:left;}
</style>
</body>
</html>
Google Cluster works fine but the sidebar element on click it was it was not popping up the infowindow.
Markers that are "clustered" aren't added to the map. In your myClick function, add them to the map or zoom in so the clusterer "unclusters" them.
function myClick(id) {
map.setCenter(markers[id].getPosition());
map.setZoom(16);
google.maps.event.trigger(markers[id], 'mouseover'); // to display InfoWindow
}
proof of concept fiddle
code snippet:
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#map {
height: 100%;
width: 50%;
float: right;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk'></script>
<script type='text/javascript' src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
<div style="width:100%;height:100%;">
<div id="map"></div>
<div style="width:50%; float:left;">
Hello 1<br>
Hello 2<br>
Hello 3<br>
Hello 4<br>
</div>
</div>
<script>
var markers;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 35.1264,
lng: 33.4299
}
});
var infoWin = new google.maps.InfoWindow();
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: 'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
});
google.maps.event.addListener(marker, 'mouseover', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
// markerCluster.setMarkers(markers);
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [{
lat: 35.1218939381583,
lng: 33.42075903167722,
info: " Hello 1"
},
{
lat: 35.11596152729056,
lng: 33.42702467193601,
info: " Hello 2"
},
{
lat: 35.116312569544064,
lng: 33.43535024871824,
info: " Hello 3"
},
{
lat: 35.11497860093425,
lng: 33.430372068786596,
info: " Hello 4"
},
];
google.maps.event.addDomListener(window, "load", initMap);
//on click function
function myClick(id) {
map.setCenter(markers[id].getPosition());
map.setZoom(16);
google.maps.event.trigger(markers[id], 'mouseover');
}
</script>
it's possible to get template text from 'childDiv' id when I initialize a Google Map? My code looks like this:
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
google.maps.event.addDomListener(window, "load", initialize());
#map {
height: 450px;
width: 450px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
<div id="childDiv">testes</div>
</div>
When I debug this code after initialize map function, that my childDiv gone.
Jsfiddle: https://jsfiddle.net/ce4bpzhh/
That is the default way the google maps works. It will overwrite the contents of the div you specify for it.
There is an option, however, to tell it to keep the existing contents.
The option is noClear and you must set it to true.
From the Google maps documentation about mapOptions
noClear - Type: boolean
If true, do not clear the contents of the Map div.
Working example
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear:true // ADD THIS OPTION
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
google.maps.event.addDomListener(window, "load", initialize());
#map {
height: 450px;
width: 450px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
<div id="childDiv">testes</div>
</div>
I tried embedding Google Maps javascript API to my website. Tried it local and it worked fine but as soon as i try it on my webserver the tiles wont load.
Heres the simple code im using:
#map { height: 250px; }
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.101670, lng: 9.212140},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 49.101670, lng: 9.212140},
map: map,
title: 'OPTIKHAUS FLEIN'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap">
</script>
Here is how it looks like on the website
Image
even the marker is showing up.
thanks in advance
You have extra spaces in url - js?key. Check my snippet. I update this line "https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap" only
#map { height: 250px; }
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.101670, lng: 9.212140},
zoom: 15
});
var marker = new google.maps.Marker({
position: {lat: 49.101670, lng: 9.212140},
map: map,
title: 'OPTIKHAUS FLEIN'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrIgqoG8GX88lnjBFX_H_UH6VpK90khSA&callback=initMap">
</script>
When I load the site everything is displayed fine, but the google map is not loaded until I resize my web browser. I am using jquery mobile.
here attached the html and script i used
<div id="map-canvas" id="map-canvas" style="width: 100%; height: 600px; padding: 0;">
</div>
<script type="text/javascript">
shopLAT[1] = 30.197932;
shopLONG[1] = -97.710452;
</script>
<!-- Google Maps -->
<script type="text/javascript">
map="";
//function loadMap() {
var latLng = new google.maps.LatLng(shopLAT[1], shopLONG[1]);
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow({content: "Marker"});
var contentString = "<b>Customer:</b> George Adams";
var marker = new google.maps.Marker({
position: latLng,
map: map,
html: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
//}
$(document).ready(function(){
$("#idmaptab").bind('onClick', function() {
google.maps.event.trigger(map, 'resize');
$("#map-canvas").css("height","100%");
});
});
</script>
Try to set the map-canvas height and width in pixels. Then reload the page. See if that helps.
In css:
#map-canvas{
width: 200px;
height:200px;
}
I'm using GMaps to display a map on my website. It is pretty easy to create a map with an infoWindow. However, the infoWindow only appears when the marker is clicked.
My Javascript:
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: 11.5671732,
lng: 104.92592450000006,
zoom: 15
});
map.addMarker ({
lat: 11.5671732,
lng: 104.92592450000006,
infoWindow: {
content: "<h3>D-Care Dental Clinic</h3><p class='address'>Address: No.26,St.23, <br />Sangkat Chey Chom Nas, Khan Daun Penh, Phnom Penh, Tel: 023 986836/012887601</p>"
},
});
});
After stackoverflowing, I only see people hard coding using Google map API to achieve this.
So I wonder if there is any option to display infoWindow automatically on page load without clicking on the marker?
Here's the link to my map page.
Any help would be very much appreciated.
Triggering a click on the marker should work:
google.maps.event.trigger(map.markers[0], 'click');
proof of concept fiddle
code snippet:
var map;
$(document).ready(function() {
map = new GMaps({
div: '#map',
lat: 11.5671732,
lng: 104.92592450000006,
zoom: 15
});
map.addMarker({
lat: 11.5671732,
lng: 104.92592450000006,
infoWindow: {
content: "<h3>D-Care Dental Clinic</h3><p class='address'>Address: No.26,St.23, <br />Sangkat Chey Chom Nas, Khan Daun Penh, Phnom Penh, Tel: 023 986836/012887601</p>"
},
});
google.maps.event.trigger(map.markers[0], 'click');
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div id="map"></div>
infowindow.open(map,marker);
should do the trick.
It will connect better via an example, basically we will simply make infowindow.open(); a part of "initialize" function itself and call "initialize" function on map load.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(28.4387675, 77.5243212); //replace with lan and lat
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<p>Add information for info window here</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Contact Us'
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Now place this code in section:
<div id="map-canvas" style="height:425px; "> </div>