用Instagram图片替换Google Map标记

Question

I'm working with the Instagram and google API. 我正在使用Instagram和Google API。 I'm trying to create thumbnail images from instagram to replace the markers on a Google Map by storing the longitude and latitude from the Instagram images. 我正在尝试从instagram创建缩略图，以通过存储Instagram图像的经度和纬度来替换Google Map上的标记。 I am able to make the markers clickable to show the images but I would like to replace the markers to show small thumbnails instead (similar to the instagram map function http://www.topnews.in/files/instagram-photo-map.jpg ) 我可以使标记可单击以显示图像，但我想替换标记以显示小的缩略图（类似于instagram地图功能http://www.topnews.in/files/instagram-photo-map。 jpg ）

Here is my code; 这是我的代码；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <?php


    $lat = "";
    $long = "";


    function getMarkers(){
    global $lat ;
    global $long ;
     $request  ="https://api.instagram.com/v1/media/search?        lat=".$lat."&lng=".$long."&access_token=__";

                $crl = curl_init(); //creating a curl object
                $timeout = 10;  //so it stops getting info after failing for more than number
                curl_setopt ($crl, CURLOPT_URL, $request);
                curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
                curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
                $json = curl_exec($crl); //perhaps should be called $xml_to_parse!
                curl_close($crl); //closing the curl object

                $json1 = json_decode($json, true); 
                $json2 = json_decode($json); 

                  //$decodeSearch =  json_decode($searchlocation,     true);
                  //$searchlocation =  $instagram-    >mediaSearch("","","","",20);

                $dataCount = count($json2->data);
                $dataObjects = $json2->data;


                foreach($dataObjects as $currentObject) {
                echo "[".$currentObject->location->latitude.",".$currentObject-    >location->longitude.",'".$currentObject->images->low_resolution->url."'],";
                }
            }// close function



?>

    <!-- this key belongs to Tamsin! -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?    key=__&sensor=false">
    </script>

    <script type="text/javascript">
    var map;
    var marker;
    var markersArray = [<?php getMarkers(); ?>];

    function initialize() {
    var infoWindow = new google.maps.InfoWindow;
    var myLatLong = new google.maps.LatLng(<?php echo "".$lat.",".$long.""; ?>);
    var mapOptions = {
        center: myLatLong,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
    // loop around markersArray
    for(var i = 0; i < markersArray.length; i++){
    var html = "<img src='"+markersArray[i][2]+"' />";//url
    myLatLong = new google.maps.LatLng(markersArray[i][0],markersArray[i][1]);
    marker = new google.maps.Marker({
        position: myLatLong,
        map: map,
        });
     bindInfoWindow(marker, map, infoWindow, html);
    }
  }

     function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, this);
  });
  }

  </script>
 </head>

Answer 1

You can use Custom Markers on Google Maps. 您可以在Google地图上使用自定义标记。

You can either select an icon from the available library, or use an image URL of your own as a marker, for instance an Instagram picture URL as described below: 您可以从可用库中选择一个图标，也可以使用自己的图像URL作为标记，例如如下所述的Instagram图片URL：

var marker = new google.maps.Marker({
  map: map,
  position: myLatLng,
  animation: google.maps.Animation.DROP,
  icon: {
    url: 'http://distilleryimage10.s3.amazonaws.com/ee6a320caaa711e2b60722000a9f09f0_5.jpg',
    size: new google.maps.Size(32, 32),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(16, 16),
    scaledSize: new google.maps.Size(32, 32)
  }
});

Please take a look at the Complex Icons documentation to have more information about attributes about size and position of your markers like some I used above the resize the icon to 32x32 pixels. 请查看“ 复杂图标”文档，以获取有关标记的大小和位置的属性的更多信息，例如我在将图标调整为32x32像素上方使用的一些标记。

用Instagram图片替换Google Map标记

问题描述

1 个解决方案

解决方案1
1 2014-03-22 15:35:40

用Instagram图片替换Google Map标记

问题描述

1 个解决方案

解决方案1 1 2014-03-22 15:35:40

解决方案1
1 2014-03-22 15:35:40