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>
Related
Code for my google map:
<div class="contact-map fullwidth">
<iframe id="contacts-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2934.840706379279!2d23.333396514681272!3d42.643536825146064!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40aa84104363e1bf%3A0x52c1ac43c6be263a!2z0YPQuy4g4oCe0J_RitGB0YLRitGAINGB0LLRj9GC4oCcIDExLCAxNzAwINC60LIuINCS0LjRgtC-0YjQsCwg0KHQvtGE0LjRjw!5e0!3m2!1sbg!2sbg!4v1502701860622" frameborder="0" allowfullscreen></iframe>
</div>
This is how map looks, and i want to post some label with text over the arrow ? Or something else around the pin?
You can not do it with Google Maps Embed API. But you can place custom tooltip windows using Google Maps JavaScript API as shown below.
<div id="container">
<style>
#map {
height: 100%;
}
body,
html,
#container {
height: 100%;
}
</style>
<div id="map"></div>
<script>
function initMap() {
//Location
var address = {
lat: 40.730,
lng: -73.935
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: address
});
//Your custom label content
var contentString =
'<div>' +
' <h1>Title</h1>' +
' <p>This is your custom description and you can type anything here.</p>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: address,
map: map,
title: 'My Place'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
//Open overlay by default
infowindow.open(map, marker);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</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);
});
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); }
here is my code i have done upto this point where when i add marker and hover it infowindow appears, but all of them has the same infowindow i need it to be change for each marker, second instead of clicking on the marker it gets deleted i want to creat a custom menu box on the top of marker where there should be options to add info and delete whe i click the marker.
<html>
<head>
<title>example</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#map_canvas {
width: 100%;
height: 500px;
background-color: #CCC;}
#menu_bar{
width: 100%;
height: 150px;
position:absolute;
bottom:0px;
background-color:#008080;
border-top:1px solid red;}
body{
padding:0px;
margin:0px;}
</style>
<!-- google maps Scripting start -->
<script type="text/javascript">
var markers = [];
function initialize() {
var myLatlng = new google.maps.LatLng(44.5403, -78.5463);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
// add marker to positon
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
// deleting
google.maps.event.addListener(marker, 'click', function(event) {
this.setMap(null);
});
// adding info window to gMaps
var infowindow = new google.maps.InfoWindow({
content: "holdings content area"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- google maps Scripting ends -->
</head>
<body>
<div id="map_canvas"></div>
<div id="menu_bar">
</div>
</body>
</html>
First create a menu or popup or whatever you want in a html copy this html into javascript variable, next create gMap infoWindow and set content to your custom design, in last step bind event to your marker and in that event open your infowindow.
var map = new google.maps.Map(document.getElementById('yourmap'), mapOptions);
var popup= '<div>Design your whatever styled popup you want</div>';
var infowindow = new google.maps.InfoWindow({
content: popup
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'ABC'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
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>