How to create new info window that is customized by us and not an default window that are provided by the google. I need to create and customize a new one for my website. (not google.maps.InfoWindow)
If you don't want to use the Google's default InfoWindow, then take a look at InfoBubble.
infobubble.js is a separate file, very simple and easy to edit their styles.
FYI: This has a wide support, so you can even ask question here tagged as infobubble, if you face any problem.
Better don't reinvent the wheel, it will consume a lot of your time. But you can try it if you want to learn.
You can use InfoBox. It basically extends the infoWindow class allowing for more customization and styling.
Visit this link for infoBOx.
In case of InfoWindows you can do this:
var infoWindow = new google.maps.InfoWindow({
content: '<div id="content">'+Content+
'</div>'
});
You can style it as you like.
Please read this article it will more helpful.
You just implement this using the InfoBox class provided by google that you can find here. It basically extends the infoWindow class allowing for more customization and styling.
Futher more details read this links and links
I used the below script for creating and customizing the new infowindow in google map
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var locations = [
['chennai', 13.0810, 80.2740, 4],
['madurai', 9.9300, 78.1200, 5],
['coimbatore', 11.0183, 76.9725, 3],
['Trichy', 10.8100, 76.9725, 2],
['vellore', 12.9202, 79.1333, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(13.0810, 80.2740),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var info = '<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"> For more Details <a href="smaatapps.com/citycaching/"><img src="images/i.png" width="46" height="45">' + '</div>';
var marker, i;
var icon='images/';
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: 'images/pin.png',
visible: true
});
var boxText = document.createElement("div");
boxText.style.cssText = "background-image:url(images/popup.png); width:346px; height:183px;";
boxText.innerHTML = "<p style='padding-left:40px; position:relative;top:20px;color:white; v-align:center;'><table style='color:white;padding-top:60px'><tr><td><img src='images/i.png' width='46' height='45'></td><td><a href='http://smaatapps.com/citycaching/overview.php'>For More Information</a></td></tr></table></p>";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-10, 0)
,zIndex: null
,boxStyle: {
background: "url('popup.png') no-repeat"
,width: "346px"
}
,closeBoxMargin: "22px 29px 2px 2px"
,closeBoxURL: "images/close.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
ib.setContent('<div class="mybackground" style="width:346px; height:183px; background-image:url(images/popup.png);"><p style="padding-top:40px;color:white; padding-left:40px;">' + locations[i][0] + '</p><p style="padding-left:40px; position:relative;top:20px;color:white; v-align:center;"><a href="http://smaatapps.com/citycaching/overview.php?id=' + locations[i][3] + '"><table style="color:white;"><tr><td><img src="images/i.png" width="46" height="45"></td><td>For More Information</td></tr></table></p>' + '</div>');
ib.open(map, marker);
}
})(marker, i));
}
</script>
Related
I just wondered if anyone knew of a simple script available that will do the following:
Show Google map location of a particular vendor by getting its name from URL. Like we see in various listing websites like Justdial, IndiaMart, Zomato and a lot more. More clearly if my URL is
www.example.com/list.php?city=Delhi
It will show Delhi on google map embed on my list.php web page.
Does anyone know if something like this already exists in PHP?
Thanks in advance.
This will help you.
Html Part.
<div id="map" style="width:100%; height:500px;"></div>
Javascript:
function initMap() {
var latitude = your latitude;
var longitude = Your longitude;
var myLatlng = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
});
var address = Address;
var infowindow = new google.maps.InfoWindow({
content: address
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
}
And finally you have to include map library.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=Google key&callback=initMap">
</script>
My code is as below `
<script type="text/javascript">
var locations = [
['add1', lat1, long1],
['add2', lat2, long2],
['add3', lat3, long3],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom:10,
center: new google.maps.LatLng(18.528771, 73.906314),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>`
More than one pins are there on map, I would like to display one of the pin in diff color or display an image instead of bubble.
I am implementing the code in PHP.
You need add an icon attribute to the marker options and set the image to the correct google pin:
var image = 'images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
see google doc google example
I have a php application that stores Lng-Lat Coordinates to my database.
I would like to show all these places to a google map.
Edit: I have 6000 coordinates, I would like to do this in some way automatically.
Thank you
There are articles for that, which you can find nice and easily on Google
https://developers.google.com/maps/articles/phpsqlajax_v3
If you have several locations, you can use the following code:
var coords = [
[40.980542, 55.111786],
[42.329036, 55.222452],
[44.280249, 54.333]
];
function initialize() {
var myLatlng = new google.maps.LatLng(coords[0][0], coords[0][1]);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0; i < coords.length; i++) {
var latlng = new google.maps.LatLng(coords[i][0], coords[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "marker : " + (i + 1)
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Check out a working example in JSfiddle.
Also, take a look at Google Places API.
Its a service that returns information about Places using HTTP requests
I have used coding for multiple markers and I need to customize the info window which is now displaying the default one. i need to custom the window with the background image and with with link
<script type="text/javascript">
var locations = [['chennai', 13.0810, 80.2740, 4],
['madurai', 9.9300, 78.1200, 5],
['coimbatore', 11.0183, 76.9725, 3],
['Trichy', 10.8100, 76.9725, 2],
['vellore', 12.9202, 79.1333, 1]];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(13.0810, 80.2740),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var icon='images/';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: icon + 'pin.png',
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
You can place anything you like HTML wise into the info window that you create with this call.
infowindow.setContent(locations[i][0]);
So you can do this for example
var info = '<div class="mybackground">' +
'<div>Hello World</div>
'<div>Link</div>
'<div>';
infowindow.setContent(info);
I have implemented a styled google map into my website, when I view the page on an iphone it locks the zoom level of the web page. The "map" is still "pinchable" to zoom but the webpage is not.. I can't work out how to turn on the pinch zoom for the webpage and the map?
Thanks in advance any helpers! Here's a link to the page - http://esdaledesigns.com/contact.php
<script type="text/javascript">
function initialize() {
// Create an array of styles.
var styles = [
{
"stylers": [
{ "hue": "#ff6e00" },
{ "saturation": -67 }
]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "The Stockwell"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(51.890488, 0.899154),
mapTypeControlOptions: {
mapTypeIds: ['map_style'],
},
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var myLatlng = new google.maps.LatLng(51.890488, 0.899154);
var marker = new google.maps.Marker({
position: myLatlng,
animation: google.maps.Animation.DROP,
map: map,
title:"The Stockwell"
});
//information
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">The Stockwell Colchester</h2>'+
'<div id="bodyContent">'+
'<p>THE STOCKWELL<br />18 WEST STOCKWELL STREET<br />COLCHESTER<br />ESSEX<br />CO1 1HN<br /></p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
</script>
ok, worked it out....
It was this bit of code a few lines above the script I posted, just above the google api key. <meta name="viewport" content="initial-scale=2.0, user-scalable=no" /> I changed user-scalable to "yes" and initial-scale to "0.5" and everything is working correctly.
Hope this helps someone else.