EDIT: Basically like the ASDA Store Locator
I have a store locator where when you type in your postcode and it shows the 3 stores that are close to you. From this 3 markers appear on the map for each location. The data is pulled in from a MYSQL database and that is where the lat and long is stored. What i am after is have the results numbered say 1,2 and 3 and a different marker with the numbers 1 2 and 3 on so they know what result store relates to what marker. I know how to create markers but i am im unsure how to apply this. Here is my code that i have used to show the results and display the markers on the map:
PHP
<?php which displays the results down the side of the map..
if(isset($stores)){
foreach($stores as $store){ ?>
<div class="stores">
<p class="name"><?php echo $store['name']; ?></p>
<p class="address"><?php echo $store['address']; ?></p>
<p class="address"><?php echo $store['postcode']; ?></p>
</div>
<php number_format($store['distance'],2) ?> miles
<?php
}
}
?>
To get the markers for each result on the map i obviously used javascript:
function initialize() {
var locations = [];
<?php
$count = 0;
foreach($stores as $store){
?>
locations.push(['<?php echo $store['name'] ?>','<?php echo $store['lat'] ?>','<?php echo $store['lng'] ?>','<?php echo $count++; ?>']);
<?php
}
?>
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(55.136319, -2.504183),
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() {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
google.maps.event.addDomListener(window, 'load', initialize);
This displays the default marker but if i was to declare each marker a image or colour, how do i apply it to the array results for each result? Any guidance would be appreciated.
Markers have an icon property where you can change the image that is used. I would recommend having a marker icon for each location with the index in the name (e.g. marker0.png, marker1.png, marker2.png). Then set the icon when you create the marker.
Google has different ones you can grab, but the urls are not as easy to find all the time. Here is a site that lists some of them: http://jg.org/mapping/icons.html
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: "url/to/the/marker/marker" + i + ".png",
map: map
});
}
I did this a while back with the following approach. When I declared my marker I used.
var marker = createMarker(map,point,label,html,rank,type);
Then
function createMarker(map, latlng, title, html, rank,type) {
var image = new google.maps.MarkerImage("images/goldPin.png",
// This marker is 24 pixels wide by 37 pixels tall.
new google.maps.Size(24, 37),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,37.
new google.maps.Point(15, 20));
var shadow = new google.maps.MarkerImage('images/goldPinShadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(31, 37),
new google.maps.Point(0,0),
new google.maps.Point(15, 20));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
switch (type) {
case "general":
var markerOptions = {
title: title,
shadow: shadow,
icon: image,
shape: shape,
position: latlng,
map: map
}
break;
/*
more types go here
*/
}
var marker = new google.maps.Marker(markerOptions);
google.maps.event.addListener(marker, "click", function() {
var infowindowOptions = {
content: html
}
var infowindow = new google.maps.InfoWindow(infowindowOptions);
setInfowindow(infowindow);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "mouseover", function() {
});
google.maps.event.addListener(marker, "mouseout", function() {
});
return marker;
}
Let me not forget to mention that I used custom markers with my application which I strongly encourage.
Related
I have a database which contains addresses. I wish to display these addresses on a google map. I succeeded in generating a json file like this
$json = "https://maps.googleapis.com/maps/api/geocode/json?address=" . $row["HUISNUMMER"] . "+" . $row["STRAATNAAM"] . "+" . $row["STAD"] . "&key=MYPRIVATEKEY";
I can get the lat and long through php like this (in the same loop where I show the database records):
$jsonzip = file_get_contents($json);
$jsondata = json_decode($jsonzip,true);
$jsonlat = $jsondata['results']['0']['geometry']['location']['lat'];
$jsonlong = $jsondata['results']['0']['geometry']['location']['lng'];
And now I'm stuck turning these into markers.
For now I have the default google code to show a marker
<script>
function initMap() {
var myLatLng = {lat: 50.6847204, lng: 4.1045525};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
How would I add all the locations on the map?
You will first need to get the PHP variable into the javascript, an example:
<?php echo json_encode($jsondata); ?>
Then a for loop whith the creaton of a marker inside it. Something like:
for(var i = 0; i < jsondata.length; i++){
var marker = new google.maps.Marker({
position: jsondata[i]['geometry']['location']['lat'],
map: map,
title: 'Hello World!'
});
}
try this
$locations = json_decode($jsonzip, true);
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i]['geometry']['location']['lat'], locations[i]['geometry']['location']['lng']),
map : map,
animation : google.maps.Animation.DROP,
icon : new google.maps.MarkerImage( '/PATH/marker.svg', null, null, null, new google.maps.Size(24, 24) ),
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h3>TITLE</h3>');
infowindow.open(map, marker);
}
})(marker, i));
}
for more informations: https://www.revilodesign.de/blog/google-maps-api/google-maps-api-karte-mit-mehreren-marker-und-infowindow/
All of my markers are coming from an AJAX call and are accurately placed on the map. However, the initial view is fully zoomed out, along the equator, in North America.
I know the solution lays somewhere with bounds.extend and map.fitBounds but apparently I'm doing it wrong.
I've always had an issue with this, so hopefully someone can help elevate this thorn in my side:
var map;
var markers = [];
var home_marker;
function initialize() {
// Display a map on the page
if ( document.contains(document.getElementById("map_canvas")) ) {
bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 12,
center: new google.maps.LatLng(48.4222, -123.3657)
});
// a new Info Window is created
infoWindow = new google.maps.InfoWindow();
// Event that closes the InfoWindow with a click on the map
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
// Add Home Marker
home_marker = new google.maps.Marker({
position: new google.maps.LatLng(user_address_lat, user_address_lng),
map: map,
icon: '/images/map-icon-your-home.png'
});
}
}
function displayMarkers( properties ) {
// this variable sets the map bounds and zoom level according to markers position
var bounds = new google.maps.LatLngBounds();
// For loop that runs through the info on markersData making it possible to createMarker function to create the markers
for (var i = 0; i < properties.length; i++){
var latlng = new google.maps.LatLng(properties[i]['latitude'], properties[i]['longitude']);
var price_current = properties[i]['price_current'];
var bedrooms = properties[i]['bedrooms'];
var total_baths = properties[i]['total_baths'];
var listing_id = properties[i]['listing_id'];
createMarker( latlng, price_current, bedrooms, total_baths, matrix_unique_ID );
// Marker’s Lat. and Lng. values are added to bounds variable
bounds.extend(latlng);
}
// Finally the bounds variable is used to set the map bounds
// with API’s fitBounds() function
map.fitBounds(bounds);
}
function createMarker( latlng, price, bedrooms, bathrooms, matrix_id ) {
var formatted_price = accounting.formatMoney(price, '$', 0);
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: '/images/map-icon.png'
});
google.maps.event.addListener(marker, 'click', function() {
// Variable to define the HTML content to be inserted in the infowindow
var iwContent = '<div class="row"><div class="small-12 columns"><img src="http://www.mywebsite.com/properties/'+listing_id+'/image-'+matrix_id+'-1.jpg"></div></div>' +
'<div class="row"><div class="small-12 columns"><p class="price-current text-center">'+formatted_price+'</p></div></div><hr>' +
'<div class="row"><div class="small-6 columns"><p class="bedrooms"><span class="fw-semi-bold">Beds:</span> '+bedrooms+'</p></div>' +
'<div class="small-6 columns"><p class="total-baths"><span class="fw-semi-bold">Baths:</span> '+bathrooms+'</p></div></div>';
// including content to the infowindow
infoWindow.setContent(iwContent);
// opening the infowindow in the current map and at the current marker location
infoWindow.open(map, marker);
});
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
Make a new Part to your script or make a new one, and code it specificly to change zoom in camera ammount and, add ui button for it.
I am using the Google Maps API JS v.3 that has several hundred markers. I want to open a modal with info specific to the marker they clicked on. I'm plan on using PHP and AJAX to get the modal data from the MySQL Database, but I'm not sure how to determine which marker the user clicked...
Any help is greatly appreciated
`
var map;
//icon variables
/*
var dem = 'path/to/blue/icon.png';
var rep = 'path/to/red/icon.png';
var oth = 'path/to/grey/icon.png';
*/
var locations = [
<?php
$c = 0;
$nr = mysqli_num_rows($gethouses);
while($z = mysqli_fetch_array($gethouses)):
?>
['<?php echo $z['name_first'].' '.$z['name_last']; ?>', <?php echo $z['lat']; ?>, <?php echo $z['lng']; ?>, 4],
<?php
$c++;
endwhile;
?>
];
var map = new google.maps.Map(document.getElementById('google_world_map'), {
zoom: 10,
center: new google.maps.LatLng(39.675, -119.98),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>`
You can add a custom parameter in your marker object (which value ideally should be unique).
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,
custom_param: some_unique_value
});
....
}
Then on your marker click event you can identify which marker is clicked by getting the value in this case marker.custom_param.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
// make use of `marker.custom_param`
var myCustomParam = marker.custom_param;
}
})(marker, i));
}
This is what I have... PHP pulls down 10 pairs of lat/long from an API url which I have managed to get working okay but I cannot seem to plot them on a map with multiple markers labelled 1-10.
My php code:
<?php
// Loading Domus API
$url_search = 'http://url/site/go/api/search';
$xml_search = #simplexml_load_file($url_search) or die ("no file loaded") ;
//Displaying latitude and longutude
$house = json_encode($house);
}; ?>
JavaScript bit:
var locations = "<?php foreach($xml_search->property as $house) { echo $lat = $house->address->latitude , $long = $house->address->longitude;}; ?>";
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(37.0625,-95.677068),
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));
}
Which is then needs to be displayed in here
<div id="map" style="width: 500px; height: 400px"></div>
But I just get a blank page, of course.
Okay, I've managed to figure it out.
Here is my php code in the head part
<?php
// Loading Domus API
$url_search = 'http://url/site/go/api/search';
$xml_search = #simplexml_load_file($url_search) or die ("no file loaded") ;?>
Then I have my javascript
// Load property ID followed by Lat and Long for each house (total of 10)
var locations = [<?php foreach($xml_search->property as $house) {
echo '['.$house->id. ',' .$house->address->latitude. ',' .$house->address->longitude.'],';
} ?>];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
Works beautifully, now just need to set up labelled markers and I am good to go.
I try to display a small map within a google map infowindow. The purpose is once the user click on the marker, an infowindow opens with a small map in it displaying the satellite view. The main code below is working quite well. The only thing is that I have an empty 'map_loc' because I don't know where to put the 'var map_loc'.
I'm using a query in a while loop from a mysql database to get the informations required.
Basically my question is, where do I have to put that portion of code in the main code below to display the small map named 'map_loc' which the div is in the marker 'locations':
var map_loc = new google.maps.Map(document.getElementById('map_loc'), {
zoom: 17,
center: new google.maps.LatLng(<?php echo $latlng_loc?>),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
-
<div id="map" style="width:600px; height:600px;"></div>
<script type="text/javascript">
var locations = [
<?php
while ($x = $req->fetch())
{
// variables obtained :
$name = $d['name'];
$latlng_loc = $d['latlng']; // I need it to display the marker at the good location but also now to display the map within the infowindow
?>
['<h3><?php echo $name;?></h3><div id="loc_map" style="width:250px; height:150px;"></div>', <?php echo $latlng_loc?>],<?php
}
?>
];
// here is the main map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(<?php echo $latlng?>),
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));
}
Thanks for any help.
infowindow of google map, It can be use HTML intent .. try this:
example to 1 marker:
var content1 = '<div id="smallmap1"></div>';
var map_loc;
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(content1);
infowindow.open(map, marker);
set_small_map(i);
}
})(marker, i));
//"smallmap"+i == smallmap1, if i == 1;
function set_small_map(i){
map_loc = new google.maps.Map(document.getElementById("smallmap"+i), {
zoom: 17,
center: new google.maps.LatLng(<?php echo $latlng_loc?>),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
};