I want to show Multiple Map Pointers on a Map coming from Custom post type. I can able to get single Map pointer. How can I get Multiple Map Pointers on the map? Here is my code.
<style>
#map_wrapper {
height: 400px;
}
#map_canvas {
width: 100%;
height: 100%;
}
</style>
<?php
$location = get_field('google_map_lat_long');
if (!empty($location)):
?>
<?php /* ?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php */ ?>
<!-- End Content -->
<script>
jQuery(function ($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers''
// $info='';
var markers = [
<?php
echo '["' . $location['address'] . '",' . $location['lat'] . ',' . $location['lng'] . '],';
?>
];
// Info Window Content
var infoWindowContent = [['<div class="info_content"><h3><?php echo $location['address']; ?></h3><p><?php echo $location['address']; ?></p></div>']];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
</script>
<?php
endif;
?>
<?php endwhile; ?>
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
Thanks, :)
Not sure why you are having problems adding multiple markers to a map but you might be able to work out what to do from this example.
<!doctype html>
<html>
<head>
<title>Google maps - multiple markers example</title>
<script type='text/javascript'>
/* data, derived from a db call and written as a json object */
var json={
"results":{
"0":{"name":"Kinnettles","lat":"56.61543329027024","lng":"-2.9266123065796137"},
"1":{"name":"Nathro","lat":"56.793249595719956","lng":"-2.8623101711273193"},
"2":{"name":"Ark Hill","lat":"56.57065514278748","lng":"-3.0511732892761074"},
"3":{"name":"Dodd Hill","lat":"56.54251020079966","lng":"-2.9051538305053555"},
"4":{"name":"Govals","lat":"56.582320876071854","lng":"-2.9509015874633633"},
"5":{"name":"Carsegownie","lat":"56.67951330362271","lng":"-2.8062983350524746"},
"6":{"name":"Frawney","lat":"56.56806620951482","lng":"-2.9501720266113125"},
"7":{"name":"North Tarbrax","lat":"56.57144715546598","lng":"-2.92476614282225"},
"8":{"name":"The Carrach","lat":"56.6938437674986","lng":"-3.131382067657455"},
"9":{"name":"Glaxo","lat":"56.70431711148748","lng":"-2.4660869436035"}
}
};
/* callback function */
function initialise(){
var bounds = new google.maps.LatLngBounds();
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map( document.getElementById('map'), {
zoom:10,
center: { lat: 56.6154, lng: -2.9266 }
});
/* process json data and add a marker for each location */
var data=json.results;
for( var o in data ){
var latlng=new google.maps.LatLng( data[o].lat, data[o].lng );
var title=data[o].name;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
content:title
});
google.maps.event.addListener(marker, 'click', function(event){
infoWindow.setContent( this.content );
infoWindow.open(map, this);
}.bind(marker));
bounds.extend( latlng );
}
map.fitBounds(bounds);
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&callback=initialise' type='text/javascript'></script>
<style type='text/css'>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map{
display:block;
box-sizing:border-box;
width:800px;
height:600px;
margin:1rem auto;
float:none;
border:3px solid black;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>
Related
hello I made a code to open a webpage that contain the map with coordinates placed in a database I want to auto update the map with new markers of the new coordinates from that database
here is the code in php please help me
<?php
// read data
$account =mysql_connect("localhost","username","password")
or die(mysql_error());
mysql_select_db("first",$account);
$sql ="SELECT * FROM test";
$result=mysql_query($sql,$account);
while($row=mysql_fetch_array($result)){
$Lo=$row['one'];
$Lat=$row['two'];
}
echo $Lo.'and '.$Lat.'<br>';
?>
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng('<?php echo $Lo; ?>','<?php echo $Lat; ?>');
function initialize()
{
var mapProp = {
center:myCenter,
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
So I finally did it :D . With help form various different sources and all! here us the complete code :
<?php
error_reporting(E_ALL ^ E_DEPRECATED);
$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("vsms3") or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<!-------- Customizable Css for Map ----------------------------->
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 500px; height: 300px; border: 0px; padding: 0px; }
</style>
<!---------------- Java Scripts for Map ----------------->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDzaa4MZ7r4s26i54PwErpKTynKAaWVxTc&v=3&language=en"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<!------------- Java Scripts for Map ------------------->
<script type="text/javascript">
var marker;
var map = null;
var markersArray = [];
//--------------------- Sample code written by vIr ------------
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
marker = new google.maps.Marker({
position: pt,
draggable: true,
raiseOnDrag: true,
icon: icon,
map: map
});
markersArray.push(marker);
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
setInterval(function mapload(){
$.ajax({
type: "POST",
url: 'location.php',
// data: form_data,
success: function(data)
{
// var json_obj = $.parseJSON(data);//parse JSON
var json_obj = jQuery.parseJSON(JSON.stringify(data));
for (var i in json_obj)
{ addMarker(json_obj[i].u_lat, json_obj[i].u_lon,"Longitude:" + json_obj[i].u_lon + "<br>" + json_obj[i].u_email + "<br>" + json_obj[i].u_name);
}
},
dataType: "json"//set to JSON
})
},3000);
center = bounds.getCenter();
map.fitBounds(bounds);
}
setInterval(function removeMarker() {
if (markersArray) {
for (i=0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
marker=null;
}
markersArray.length = 0;
}
},3000);
</script>
</head>
<body onLoad="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</body>
</html>
and the database related page :
<?php
$conn = mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("vsms3") or die(mysql_error());
$data = array();
$result = mysql_query("SELECT * FROM users")or die(mysql_error());
while ($row = mysql_fetch_assoc($result)) {
$data[] = $row;
}
echo json_encode($data);
//echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
?>
Hi i have problems to display more than one Google maps on one page
The first map shows correctly but the second doesnt show
I use Smarty to display templates. The results comes from a db. Can anybody check the code and help me to display more than one map
{foreach item=row from=$adress}
<tr>
<td>
<script type="text/javascript">
function initialize() {
var position = new google.maps.LatLng({$row->lat}, {$row->longi});
var myOptions = {
zoom: 12,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas{$row->site_id}"),
myOptions);
var marker = new google.maps.Marker({
position: position,
map: map,
title:"This is the place."
});
var contentString = 'Hello <strong>World</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
<div id="map_canvas{$row->site_id}" style="width:300px;height:200px;"></div>
Here is your html code:-
</head>
<body onload="initialize()">
<H1 align="center">Two Google maps side-by-side</h1>
<div id="map_canvas1" style="top: 10px; left: 25px; width:210px; height:220px; float: left"></div>
<div id="map_canvas2" style="top: 10px; left: 75px; width:210px; height:220px"></div>
</body>
</html>
<script>
function initialize()
{
<?php
for($i=1; $i<=2; $i++){
?>
var latlng<?php echo $i ?> = new google.maps.LatLng(18.520266,73.856406);
var myOptions =
{
zoom: 15,
center: latlng<?php echo $i; ?>,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map<?php echo $i; ?> = new google.maps.Map(document.getElementById("map_canvas<?php echo $i ?>"), myOptions);
var myMarker<?php echo $i; ?> = new google.maps.Marker(
{
position: latlng<?php echo $i; ?>,
map: map<?php echo $i; ?>,
title:"Pune"
});
<?php } ?>
}
</script>
I know you are using different programming language to define your code. But the logic i hope you understood.
I am using geolocation to show the current location as follow :
echo '<div style="width:48%;float:left;"><img src="http://maps.google.com/maps/api/staticmap?center='.$lat.','.$long.'&markers=titel:You+are+here|icon:http://tinyurl.com/2ftvtt6|'.$lat.','.$long.'&zoom=17&size=550x450&maptype=roadmap&&sensor=true" width="550" height="450" alt="'.$geodata['formatted_address'].'" \/></div><div style="width:48%;float:right;">';
echo 'Latitude: '.$lat.' Longitude: '.$long.'<br />';
But it is showing a static image on map. I want to show the map in which the user can zoom on map.
How can I use the map such that ?
You can do this like below:
You can use the the iframe for that
I've tried doing the request you need using an iframe to show the result for a latitude, a longitude and zoom needed:
<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q='+YOUR_LAT+','+YOUR_LON+'&hl=es;z=14&output=embed"></iframe><br /><small>See map bigger</small>
OR
You can use below code too:
<script type="text/javascript">
var map;
var infowindow;
var marker;
var geocoder = new google.maps.Geocoder();
function initialize(address) {
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, "click");
} else {
alert("Something got wrong " + status);
}
});
}
jQuery(document).ready(function() {
initialize("[your address]");
});
</script>
<div id="map" style="height: 350px; width: 100%;"></div>
The map you are using is only the static image of google map. To show a dynamic map try this code.
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
what this code does is, when a user inputs two cordinates, it setup the map with a two markers and a line to show the direction. Is it possible to change the d*efault marker* to a specific image differently for both cordinate, lets say i want the first cordinate to represent "image1.jpeg" and second cordinate to represent "image2.jpeg".
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// var center = new google.maps.LatLng(52.12, -3.2); //center of the map
var center = new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>);
var a = [
new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>),
new google.maps.LatLng(<?php echo $_Mylat2?>, <?php echo $_Mylon2?>)
];
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
for (var i=0; i<a.length;i++)
{
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: a[i]
});
}
var flightPlanCoordinates = [
new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>),
new google.maps.LatLng(<?php echo $_Mylat2?>, <?php echo $_Mylon2?>)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
</body>
</html>
where in this code can i change the marker to my specific image, thanks
You'd want to do an IF statement to determine which image the marker should load.
if(i == 0) iconImage = "image1.jpeg";
else if(i == 1) iconImage = "image2.jpeg";
Then simply add the custom icon and variable to the marker:
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: a[i],
icon: iconImage
});
I want to display the marker on the map but I can see only the first.
what is the problem?
while the marker did not show any
<?php
session_start();
//connessione al DB
include("dati_db.inc.php");
mysql_connect($host,$username,$password)or die("Connessione IMPOSSIBILE al DBMS. TIPO ERRORE:".mysql_error());
mysql_select_db($database)or die("IMPOSSIBILE selezionare il DataBase");
$idric=$_GET['id_ric']; //id richiesta
$sql = "SELECT * FROM richieste WHERE id=".$idric;
$dati=mysql_query($sql);
if (!$dati) {
echo "Query non eseguita correttamente sul DB(".$sql."): ".mysql_error();
exit;
}
$row=mysql_fetch_assoc($dati);
$luogo=$row['luogo'];
$indirizzo=$row['indirizzo'];
$descrizione=$row['descrizione'];
$oggetto=$row['oggetto'];
$indirizzogoogle=$luogo." , ".$indirizzo;
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalableo"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3: geocoding</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; text-align:center;}
#map { width:100%; height:95%; }
input { width:250px; }
#tooltip { padding:10px; text-align:left; }
#tooltip p { padding:0; margin:0 0 5px 0; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=it"></script>
<script type="text/javascript" src="inc/jquery-1.7.2.js"></script>
<script type="text/javascript" src="inc/myjs.js"></script>
<script type="text/javascript">
var createMap = function() {
//indirizzo ricavato in precedenza del luogo dell'intervento
var address = "<?php echo ($indirizzogoogle);?>";
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': address}, function(results,status) {
if (status == google.maps.GeocoderStatus.OK) {
var options = {
zoom: 12,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker(
{
position: results[0].geometry.location,
map: map,
title: 'punto di intervento'
}
);
var tooltip = '<div id="tooltip">'+
'<p>Indirizzo punto di intervento<br>'+
results[0].formatted_address+'</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: tooltip
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
sedi = new Array();
dim=0;
//popoli vettore
<?php
//recupero info di tutte le sedi
$query="SELECT * FROM utenti WHERE tipo=3";
$query_sedi=mysql_query($query);
//per ogni record creiamo un MARKER
$contcs=mysql_num_rows($query_sedi);
if($contcs > 0){
//se ci sono records mostriamo tutte le sedi in un ciclo
while($line = mysql_fetch_array($dati, MYSQL_ASSOC)){
//recupero alcune informazioni
$sede = $line['sede'];
echo ("cod_indirizzi($sede);\n");
}
}
?>
} else {
alert("Problema nella ricerca dell'indirizzo: " + status);
}
});
};
function cod_indirizzi(indirizzo){
geocoder.geocode({'address':indirizzo}, function(result, status){
map.setCenter(result[0].geometry.location);
var marker= new google.maps.Marker
({map:map,
position:result[0].geometry.location,
title: indirizzo});
});
}
window.onload = createMap;
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
the map obtained there is only a marker, and you should see 3
what is the error?
Here is a similar script i have done may this help u
use jquery 1.2.6
(function() {
window.onload = function()
{
var ttl=["place1","place2","place3"];
var options = {
zoom: 13,
center: new google.maps.LatLng(28.550000, 77.22496000000001),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating an array that will contain the coordinates
var places = [];
places.push(new google.maps.LatLng(28.550392878584265, 77.25169658660889));
places.push(new google.maps.LatLng(28.546396951091907 , 77.19741940498352));
places.push(new google.maps.LatLng(28.528748, 77.219663));
// Looping through the places array
for (var i = 0; i < places.length; i++)
{
// Adding the marker as usual
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: ttl[i]
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'mouseover', function() {
var infowindow = new google.maps.InfoWindow({
content: '<div style="overflow:hidden;">'+ttl[i]+'</div>'
});
infowindow.open(map, marker);
setTimeout(function () { infowindow.close(); }, 5000);
});
})(i, marker);
}
}
})();
HTML
<div id="map"></div>
CSS
#map {
width: 400px;
height: 400px;
border: 4px solid #ccc;
}