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);
Related
Google map loads like this on mobile
My site is wordpress and google map loads partially.(routes loading, backgroun map isn't, please look at the attached image) why is this happening? Is this causing from my code or is it google map bug? There're no errors on the console either.
<!---------------------------- Map ------------------------->
<?php if (!empty($arr)) { ?>
<script src="https://maps.googleapis.com/maps/api/js?key=<my_key>"
type="text/javascript"></script>
<div class="container map-container">
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<div id="map" style="width: 100%; height: 600px;"></div>
</div>
<script type="text/javascript">
var locations = <?php echo json_encode($arr); ?>;
var map = new google.maps.Map(document.getElementById('map'), {
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.LatLng(locations[i][1], locations[i][2]);
new google.maps.Marker({
position: marker,
map: map
});
bounds.extend(marker);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var userCoorPath = [];
for (i = 0; i < locations.length; i++) {
userCoorPath[i] = new google.maps.LatLng(locations[i][1], locations[i][2]);
}
var userCoordinate = new google.maps.Polyline({
path: userCoorPath,
strokeColor: "#000000",
strokeOpacity: 1,
strokeWeight: 2
});
userCoordinate.setMap(map);
map.fitBounds(bounds);
</script>
<?php } ?>
<!---------------------------- EndMap ------------------------->
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
Here is the Initialise function.....
function initialize() {
Here the variables $Latitude,$Longitude are array values so how can i store them in Javascript Variables so that they can store the above array values....
var lat='<?php echo $Latitude?>';
var lon='<?php echo $Longitude?>';
var latlng = new google.maps.LatLng(lat,lon);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Here how can i loop the geocoder to show multiple areas using above array variables...
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
}
Its my sample code to plot multiple areas in google map by using area name or lat,lng.
var map;
var geocoder;
var marker;
var people = new Array();
var latlng;
var infowindow;
$(document).ready(function() {
ViewCustInGoogleMap();
});
function ViewCustInGoogleMap() {
var mapOptions = {
center: new google.maps.LatLng(11.0168445, 76.9558321), // Coimbatore = (11.0168445, 76.9558321)
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Get data from database. It should be like below format or you can alter it.
var data = '[{ "DisplayText": "adcv", "ADDRESS": "Jamiya Nagar Kovaipudur Coimbatore-641042", "LatitudeLongitude": "10.9435131,76.9383790", "MarkerId": "Customer" },{ "DisplayText": "abcd", "ADDRESS": "Coimbatore-641042", "LatitudeLongitude": "11.0168445,76.9558321", "MarkerId": "Customer"}]';
people = JSON.parse(data);
for (var i = 0; i < people.length; i++) {
setMarker(people[i]);
}
}
function setMarker(people) {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
if ((people["LatitudeLongitude"] == null) || (people["LatitudeLongitude"] == 'null') || (people["LatitudeLongitude"] == '')) {
geocoder.geocode({ 'address': people["Address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false,
html: people["DisplayText"],
icon: "images/marker/" + people["MarkerId"] + ".png"
});
//marker.setPosition(latlng);
//map.setCenter(latlng);
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(this.html);
infowindow.setPosition(event.latLng);
infowindow.open(map, this);
});
}
else {
alert(people["DisplayText"] + " -- " + people["Address"] + ". This address couldn't be found");
}
});
}
else {
var latlngStr = people["LatitudeLongitude"].split(",");
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
latlng = new google.maps.LatLng(lat, lng);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false, // cant drag it
html: people["DisplayText"] // Content display on marker click
//icon: "images/marker.png" // Give ur own image
});
//marker.setPosition(latlng);
//map.setCenter(latlng);
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(this.html);
infowindow.setPosition(event.latLng);
infowindow.open(map, this);
});
}
}
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=true" type="text/javascript"></script>
<div id="map-canvas" style="width: 800px; height: 500px;">
</div>
This should work for you assuming lat and lon are javascript arrays with the same length:
var map = null;
function initialize() {
var lat='<?php echo $Latitude?>';
var lon='<?php echo $Longitude?>';
// initialize map center on first point
var latlng = new google.maps.LatLng(lat[0],lon[0]);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
for (var i=0, i<lat.length; i++) {
var latlng = new google.maps.LatLng(lat[i],lon[i]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
}
// zoom and center the map to show all the markers
map.fitBounds(bounds);
}
<?php
/* lat/lng data will be added to this array */
try{$work=$_GET["service"];}catch(Exception $e){echo 'Authorization Failed.Map may Misbehave or Buggy.Click here to report this';}
$locations=array();
$uname="root";
$pass="";
$servername="localhost";
$dbname="bcremote";
$db=new mysqli($servername,$uname,$pass,$dbname);
$query = $db->query('SELECT * FROM location');
while( $row = $query->fetch_assoc() ){
$name = $row['uname'];
$longitude = $row['longitude'];
$latitude = $row['latitude'];
/* Each row is added as a new array */
$locations[]=array( 'name'=>$name, 'lat'=>$latitude, 'lng'=>$longitude );
}
//echo $locations[0]['name'].": In stock: ".$locations[0]['lat'].", sold: ".$locations[0]['lng'].".<br>";
//echo $locations[1]['name'].": In stock: ".$locations[1]['lat'].", sold: ".$locations[1]['lng'].".<br>";
?>
<script>
//var myLatLng = {lat: -25.363, lng: 131.044};
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
scrollwheel: false,
zoom: 4
});
<?php for($i=0;$i<sizeof($locations);$i++)
{ ?>
var marker = new google.maps.Marker({
map: map,
position: {lat: <?php echo $locations[$i]['lat']?>,lng: <?php echo $locations[$i]['lng']?>},
title: 'Service'
});
<?php } ?>
}
</script>
This code Snippet uses Dynamic Content without using JSON or XML. This below code is what we see in the Browser View Source tool. Hope this helps you...
<script>
//var myLatLng = {lat: -25.363, lng: 131.044};
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
scrollwheel: false,
zoom: 4
});
var marker = new google.maps.Marker({
map: map,
position: {lat: 192.652.231.25,lng: 192.652.231.25},
title: 'Service'
});
var marker = new google.maps.Marker({
map: map,
position: {lat: 192.652.231.25,lng: 192.652.231.25},
title: 'Service'
});
}
</script>
UPDATE 2017
Google maps now supports the creation of maps with multiple locations which you can embed via iframe! Source: https://www.create.net/support/218-how-to-pin-point-multiple-locations-on-google-maps.html
Go to https://www.google.com/maps
Make sure you're signed in - you can do so by clicking the Login button in the top-right corner.
In the top left corner, next to the search box, click the menu icon to expand the menu
Click "Your Places", "Maps" and then click "Create Map" to edit your map.
A new window will pop up. Give your map a title and description, then click "Save".
You can now pinpoint locations manually by clicking the marker icon and placing it directly onto the map, or search for locations using the search box at the top of the screen.
If you're adding locations manually, you can name the location and save to add it to the map. If you're searching and adding specific locations, a green marker will appear on the map and you can click the 'Add to map' link.
Repeat steps 6 and 7 for each location you wish to plot.
Once you have done that save your map again and refresh the page. Then, to get the code to embed your map on to your Create website, please follow these steps:
Make sure you map is public. You can do this by clicking 'Share' beneath the map name.
Under 'Who has access' click 'Change' and make turn it 'On - Public on the web' and save.
Next, click the menu icon and click on the link 'Embed on my site'
The code will then pop up in a new window.
To use this, you will need to paste the code into an HTML fragment on your Create account, and then place the HTML fragment on your chosen page.
Example:
<iframe src="https://www.google.com/maps/d/embed?mid=1tX88xmVMIFW9DQneDff_ZMJtekc" width="100%" height="480"></iframe>
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>
I want to show a polyline with markers and window-info from array point (from a ajax page)
This is index Page codes:
var gmarkers = [];
var map = null;
function initialize() {
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(27.332702, 53.177137),
// mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
}
My Ajax Page:
var polylines = [];
var beaches = [
['Bondi Beach',10,15, 4],
['Coogee Beach',11,16, 5],
['Cronulla Beach',13,15, 3],
['Manly Beach',13,17, 2],
['Maroubra Beach',12,10, 1]
];
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var polylines = new google.maps.LatLng(beach[1], beach[2]);
var marker = createMarker(myLatLng,"This place",beach[0])
}
var routes = new google.maps.Polyline({
path: polylines,
strokeColor: "#FF0000",
strokeOpacity: 0.6,
strokeWeight: 4
});
routes.setMap(map);
After I call the Ajax Page , markers add with window-info , but route polyline don't show , where is the problem ?
After I call the Ajax Page , markers add with window-info , but route polyline don't show , where is the problem ?
Yes. polylines is an array here:
var polylines = [];
Here you overwrite it with a single google.maps.LatLng:
var polylines = new google.maps.LatLng(beach[1], beach[2]);
You probably want to do this instead:
polylines.push(new google.maps.LatLng(beach[1], beach[2]));