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>
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>
In my website, when I'm doing the design the google map was worked. After the hosting it shows an error:
Oops! Something went wrong"
I tried to find the solution and found API key is missing. I had created a key with my personal Gmail account and added to footer place like below.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=my api key=google-map" type="text/javascript"></script>
But after that also it didn't work. below is my google map script in HTML and js.
//Google Map
var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var contentString = '';
var infowindow = new google.maps.InfoWindow({
content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize_map);
});
<div id="google-map" class="wow fadeIn" data-latitude="13.0938666" data-longitude="80.202357" data-wow-duration="1000ms" data-wow-delay="400ms"></div>
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);
});
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 have a simple google map with markers and infowindows (like in example at Google Maps API documentation:
<html>
<meta charset="utf-8" />
<style>
.redtext {
color: red;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">click me<P class="iwtext">Hello world!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function aclick(){
$(".iwtext").toggleClass("redtext");
}
</script>
<body onload="initialize()">
<div id="map-canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
If you try this, you will see an info window after click on a marker with link (click me) and text - Hello world. If you click on a link, text become red.
But if you close infowindow, clicking on a [X], and then open it again, you will see, that text become black again, the same problem if you click again on a marker.
Is there any ways to solve this problem with rewriting content in a infowindow?
I solve it like like this:
function aclick(){ $(".iwtext").toggleClass("redtext"); contentString = '<div id="content">' + $("#content").html() + "</div>"; infowindow.setContent(contentString); }